html 5のcanvasとJavaScriptで図形描画プログラムを作成する

この文書では、canvasとJavaScriptを使用して簡単な図形描画プログラムを作成する方法を説明します.
canvas要素の作成
まずコンテナCanvas要素を用意し、次にすべてのことがJavaScriptの中にあります.

1 <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

図面環境の取得
canvas要素自体には何の外観もありません.それは空白の画板で、JSに提供されるAPIです.ほとんどのAPIはcanvas要素自身で定義されていません.canvas要素自身の属性は通常のHTML要素とあまり違いません.その描画APIはCanvasRenderingContext2Dオブジェクトに定義されています(ここではコンテキストオブジェクトに簡単に翻訳します).このオブジェクトはgetContext()法により得られた.

1 context = document.getElementById('canvasInAPerfectWorld').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関数はcanvas全体を呼び出すたびに再描画されます.まず、キャンバスの内容を空にして、線の色の太い線の接続方法を設定します.そして
2点の間にパスを描画し、配列内の座標点を順次描画します.

 1 function redraw(){
 2   context.clearRect(0, 0, context.canvas.width,   context.canvas.height); //       
 3   
 4   context.strokeStyle = "#df4b26";//      
 5   context.lineJoin = "round";//        ，      
 6   context.lineWidth = 5;//    
 7             
 8   for(var i=0; i < clickX.length; i++) {        
 9     context.beginPath();//      ，        
10     if(clickDrag[i] && i){
11       context.moveTo(clickX[i-1], clickY[i-1]);
12      }else{
13        context.moveTo(clickX[i]-1, clickY[i]);
14      }
15      context.lineTo(clickX[i], clickY[i]);
16      context.closePath();
17      context.stroke();//    
18   }
19 }

 
ペイントプロセスに必要なイベント
1 mousedownイベント
描画キャンバスにクリックすると、イベントの実行がトリガーされます.addClick関数を呼び出し、paintをtrueに設定します.

1 $('#canvas').mousedown(function(e){
2   var mouseX = e.pageX - this.offsetLeft;
3   var mouseY = e.pageY - this.offsetTop;
5   paint = true;
6   addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
7   redraw();
8 });

2 mousemoveイベント
mousedownで設定したpaintがtrueになると、マウスが移動するとmousemoveイベントの実行がトリガーされ、マウスが移動したすべてのポイントを記録し、redrawを呼び出してキャンバスを再描画します.

1 $('#canvas').mousemove(function(e){
2   if(paint){
3     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
4     redraw();
5   }
6 });

3 mouseupイベント
mouseupマウスをクリックして離すか、ドラッグして離すと、描画が完了しpaintがfalseに設定されていることを示します.

1 $('#canvas').mouseup(function(e){
2   paint = false;
3 });

4 mouseleaveイベント
mouseleaveマウスはcanvas要素を離れ、paintをfalseに設定します.

1 $('#canvas').mouseleave(function(e){
2   paint = false;
3 });