HTML5キャンバスとJavaScriptを使った描画プログラムを作成するサンプルコード-H5 チュートリアル-php.cn

HTML5キャンバスとJavaScriptを使った描画プログラムを作成するサンプルコード

黄舟

リリース： 2017-03-18 16:16:17

オリジナル

2163 人が閲覧しました

次のエディターは、html5 の canvas と JavaScript を使用して drawing プログラムを作成する簡単な例を示します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。ぜひエディターで見てみてください

この記事では、Canvas と JavaScript を使用して簡単な描画プログラムを作成する方法を説明します。

まずコンテナの Canvas 要素を準備します。その後はすべて JavaScript で行われます。

XML/HTML Code复制内容到剪贴板
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

ログイン後にコピー

描画環境を取得します。コンテキストオブジェクトは、キャンバス上に描画するためのメソッドとプロパティを提供します

context = document.getElementById(&#39;canvasInAPerfectWorld&#39;).getContext("2d");

ログイン後にコピー

描画プロセスを開始します

まず、描画パスポイントの座標を保存する必要があります。addClick 関数は、座標点の値を配列

var clickX = new Array();   
var clickY = new Array();   
var clickDrag = new Array();//存储路径点 
var paint;//是否绘制，mousedown时置为true 
function addClick(x, y, dragging)   
{   
  clickX.push(x);   
  clickY.push(y);   
  clickDrag.push(dragging);   
}

ログイン後にコピー

redraw 関数は呼び出されるたびにキャンバス全体を再描画します。まず、キャンバス上の内容をクリアし、線の色、太さ、線の接続方法を設定します。次に

2 点間のパスを描画し、配列内の座標点を順番に描画します

function redraw(){   
  context.clearRect(0, 0, context.canvas.width,   context.canvas.height); // 清除画布内容   
  context.strokeStyle = "#df4b26";//设置线条颜色   
  context.lineJoin = "round";//当两条线条交汇时，创建圆形边角   
  context.lineWidth = 5;//线条粗细   
  for(var i=0; i < clickX.length; i++) {           
    context.beginPath();//开始一条路径，或重置当前的路径   
    if(clickDrag[i] && i){   
      context.moveTo(clickX[i-1], clickY[i-1]);   
     }else{   
       context.moveTo(clickX[i]-1, clickY[i]);   
     }   
     context.lineTo(clickX[i], clickY[i]);   
     context.closePath();   
     context.stroke();//绘制路径   
  }   
}

ログイン後にコピー

描画プロセスに必要なイベント

1 マウスダウンイベント

描画時にキャンバス上でクリックします, イベントの実行をトリガーします。 addClick 関数が呼び出され、ペイントが true に設定されます。

$(&#39;#canvas&#39;).mousedown(function(e){   
  var mouseX = e.pageX - this.offsetLeft;   
  var mouseY = e.pageY - this.offsetTop;   
  paint = true;   
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);   
  redraw();   
});

ログイン後にコピー

2 Mousemoveイベント

mousedownで設定されたペイントがtrueになった後、マウスが移動するとmousemoveイベントがトリガーされ、マウスの移動のすべてのポイントがトリガーされます。常に redraw を呼び出してキャンバスを再描画します。

$(&#39;#canvas&#39;).mousemove(function(e){   
   if(paint){   
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);   
     redraw();   
   }   
 });

ログイン後にコピー

3 Mouseup イベント

mouseup マウスをクリックまたはドラッグした後に放し、パスが描画され、ペイントが false に設定されたことを示します。

$(&#39;#canvas&#39;).mouseup(function(e){   
   paint = false;   
 });

ログイン後にコピー

4 Mouseleave イベント

mouseleaveマウスはキャンバス要素から離れ、ペイントを false に設定します。

りー

以上がHTML5キャンバスとJavaScriptを使った描画プログラムを作成するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。