キャンバスにベジェ曲線を模倣するサンプルコード

空は霧の雨を待っています、そして私はあなたを待っています、ラララ、私の短い本にようこそ、今日私が共有するのは、キャンバス上でベジェ曲線を模倣するオリジナルの方法です。詳細は以下のとおりです。

レンダリング：

html

 <canvas id=mycanvas width=500 height=500>お使いのブラウザはキャンバスをサポートしていません</canvas>

css

 Canvas{ ボーダー: 1px ソリッドブラック;}

js

 var キャンバス = document.getElementById(mycanvas); var context = var x1 = 100; var y2 = 400; /半透明の線を描画します context.beginPath(); context.moveTo(500,0); context.lineTo(0,500); context.drawingStyle = rgba(0,0,0,0.3); context.lineWidth = 10; //接続線を描画します context.beginPath(); 0,500 ); context.lineTo(x1,y1); context.ストロークスタイル = black; context.beginPath(); context.moveTo(x2,y2); context.drawingStyle = black; // 赤いボールのコンテキストを描画します。 beginPath (); context.arc(x1,y1,10,0,Math.PI*2); //青いボールを描画します context.beginPath(); context.arc(x2,y2,10,0,Math.PI*2); //ベジェ曲線コンテキストを描画します.beginPath(); context.moveTo(0,500); context.bezierCurveTo(x1,y1,x2,y2,500,0); 5; context.bottom(); } //ボールをドラッグしてアニメーション化する//ボール上にある場合はアニメーション化します。 .event; var x = ev.offsetX; var y = ev.offsetY; // 赤いボール上にあるかどうかを判定します var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(マウスは赤いボールの上にあります); var ev = e || ; var xx = ev.offsetX; var yy = ev.offsetY; //キャンバスをクリアします context.clearRect(0,0,canvas.width,canvas.height); xx; y1 = yy; //再描画draw(); } } //マウスが青いボール上にあるかどうかを判定します var dis = Math.pow((x-x2),2) + Math.pow((y-y2) ) ,2); if(dis<100){ Canvas.onmousemove = function(e){ var ev = e || var yy1 = ev.offsetY; //キャンバスをクリアします context.clearRect(0,0,canvas.width,canvas.height); //再描画draw() } } } ){canvas.onmousemove = ;

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。