復習canvas

今日、プロジェクトではhtml 5のcanvasが使用されています.以前、ネット上でcanvas画板の例を見つけました.以下は例のコードです.

var canvas = document.getElementsByTagName('canvas')[0]; 
var context = canvas.getContext('2d'); 
 
var linex = new Array();  
var liney = new Array();  
var linen = new Array(); 
var defaultColor='#000';
var size=0;

var lastX = -1;  
var lastY = -1;  
var hue = 0;  
var flag = 0;  
function touchStart(e) {
	e.preventDefault();
	var touches = e.changedTouches,
		i = 0, l = touches.length, touch;
	for (; i < l; i++) {
		touch = touches[i];
		flag = 1;    //         1    0  
		size=linex.length;
		linex.push(touch.pageX-$("#canv").offset().left);  
		liney.push(touch.pageY-$("#canv").offset().top);  
		linen.push(0);  

	}
}

function touchMove(e) {
	e.preventDefault();
	var touches = e.targetTouches,
		i = 0, l = touches.length, touch;
	for (; i < l; i++) {
		touch = touches[i];
   if (flag == 1) {  
   linex.push(touch.pageX-$("#canv").offset().left);  
   liney.push(touch.pageY-$("#canv").offset().top);  
   linen.push(1);  
   context.save();  
   
   context.translate(context.canvas.width/2, context.canvas.height/2);  
   context.translate(-context.canvas.width/2, -context.canvas.height/2);  
   context.beginPath();  
   context.lineWidth = 5 + Math.random() * 10;  

   for (var i=size;i<linex.length;i++) {  
		 lastX = linex[i];  
		 lastY = liney[i];  
		 if (linen[i] == 0) {  
			context.moveTo(lastX,lastY);  
		 } else {  
			context.lineTo(lastX,lastY);  
		 }  
   }  

   context.strokeStyle = defaultColor;  
   context.shadowColor = 'white';  
   context.shadowBlur = 5;  
   context.stroke();  
  // context.restore();  
}  
	}

}

function touchEnd(e) {
	var touches = e.changedTouches,
		i = 0, l = touches.length, touch;
	for (;i < l; i++) {
		touch = touches[i];
		flag = 0;  
		linex.push(touch.pageX-$("#canv").offset().left);  
		liney.push(touch.pageY-$("#canv").offset().top);  
		linen.push(0);
	}

}

canvas.addEventListener("touchstart", touchStart, false);
canvas.addEventListener("touchmove", touchMove, false);
canvas.addEventListener("touchend", touchEnd, false);

この例は従来のプロジェクトニーズを実現しているが,これまであまり理解されていなかった.今日再びひっくり返して、新しいプロジェクトの需要を実現して、再び見る時、感じはとても楽で、見るととても明らかです.さらにcanvasはこれがいいと感じて、とても面白くて、難しくありません.ネット上で、いくつかのチュートリアルを探して、基本的に、見ても分かりやすいです.画板の中で、中に描かれた跡がはっきりしていて、contextを通じてできます.clearRect(0,0,canvas.width,canvas.height)を実装します.他の感じは言うことができなくて、自分で真剣に考えて、ゆっくりと体得して、印象がもっと深いかもしれません.