canvas初学

.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数,代表圆心坐标.第三个参数是圆的半径.第四个参数代表圆周起始位置.0 PI就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆.第六个参数是一个布尔值,true是顺时针false是顺时针. 请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。 请使用 stroke() 方法在画布上绘制确切的路径； closePath() 方法创建从当前点到开始点的路径。 var myCanvas = document.getElementById("myCanvas");/*找到canvas*/ var can = myCanvas.getContext("2d");/*创建context对象*/ var X = myCanvas.width; var Y = myCanvas.height; var oImg = new Image(); oImg.src = "img/gao4.jpg"; oImg.onload = function () {     can.beginPath();/*开始当前的路径或重复当前的路径*/     can.drawImage(oImg, 0, 0, X, Y);/*在画布上定位图像，（img，x，y,width,height）*/;     can.closePath();/*从当前点开始；*/ }; var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase()); var startEvtName = device ? "touchstart" : "mousedown"; var moveEvtName = device ? "touchmove" : "mousemove"; var endEvtName = device ? "touchend" : "mouseup"; function draw(event) {     var x = device ? event.touches[0].clientX : event.clientX;     var y = device ? event.touches[0].clientY : event.clientY;     can.beginPath();     can.globalCompositeOperation = "destination-out"; /*在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。*/     can.arc(x, y, 20, 0, Math.PI * 2, false);  /*创建弧/曲线（用于创建圆或部分圆）(圆的x,y,r,起始角，结束角，false：顺时针，true：逆时针)；*/     can.fill();/*填充颜色；*/     can.closePath();      can.linewidth=10;宽度为10像素的线条来绘制矩形；        can.strokeStyle = (new Color(150)).style;用笔触的时候的颜色 } //true 捕获 false 冒泡 myCanvas.addEventListener(startEvtName, function () {     myCanvas.addEventListener(moveEvtName, draw, false); }, false); myCanvas.addEventListener(endEvtName, function () {     myCanvas.removeEventListener(moveEvtName, draw, false) }, false);