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);