キャンバスラバーバンド線画貼り方

指で描くと輪ゴムのように伸びることがあります。 。

例は次のとおりです: point_down:

考え方は非常にシンプルで、ラバーバンド描画機能に注目するだけです。以下に、mousedown、mousemove、mouseup の 3 段階の考え方をまとめます。

Mousedown: 開始位置を記録、Drag (ドラッグ状態かどうかを記録) を true に設定、getImageData ( 橡皮筋效果关键1 )

Mousemove: ドラッグ時の位置 pos を取得し、putImageData ( 对应getImageData，橡皮筋效果关键2 )、pos に従って直線を描画して開始

マウスアップ:ドラッグすると false に戻ります

关键、2 つのキャンバス メソッド putImageData() と getImageData() にあります。 putImageData() はマウスがクリックされたときに画像を記録し、それに応じて getImageData() がそれを復元します。これら 2 つの方法が実行されない場合、次のような影響が発生します。

putImageData() はスキャンされたすべてのラインを消去するのと同じです

コード

 <canvas id=canvas width=600 height=400 style=border: 1px ソリッドブラック;> </canvas> <script type=text/javascript> let Canvas = document.getElementById('canvas'), ctx = Canvas.getContext( '2d'), CanvasLeft = Canvas.getBoundingClientRect().left, //getBoundingClientRect() は要素の位置を取得します CanvasTop = Canvas.getBoundingClientRect().top; let imageData; // 画像データを記録します let start = new Map([['x',null],['y',null]]) // かどうかを記録します。ドラッグ状態では、 Canvas.onmousedown = function (e) { let pos = PositionInCanvas(e, CanvasLeft, CanvasTop); start.set('x', pos.x', pos.y); //画像データを記録します imageData = ctx.getImageData(0,0,canvas.width,canvas.height) } Canvas.onmousemove = function (e) { if(drag === true) { let pos = PositionInCanvas(e, CanvasLeft, CanvasTop); // スキャンしたラインをすべて消去して再描画するのと同じ ctx.putImageData(imageData, 0, 0); ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')); ; } } Canvas.onmouseup = function (e) {ドラッグ = false } functionpositionInCanvas (e, CanvasLeft, CanvasTop) {//キャンバス内のマウスクリック位置を取得します。 x:e.clientX - CanvasLeft、y:e.clientY - CanvasTop } } </script>

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