canvas

注意最好在一开始的时候就给canvas设置好其宽高（若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素），而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部：也可以在js脚本中设置：

<canvas id="mycan5" width="500" height="500">
        您的浏览器不支持canvas....
  </canvas>

var mycan = document.getElementById("mycan"),ctx = mycan.getContext("2d");
    ctx.moveTo(20,20);   //定义绘画开始的位置
    ctx.lineTo(150,50);   //画一条直线，结束点坐标是x=150,y=50
    ctx.lineTo(150,200);
    ctx.strokeStyle="blue";
    ctx.stroke();  //描边
    ctx.moveTo(500,500);
    ctx.lineTo(700,600);
    ctx.stroke();  //描边

ctx.beginPath(); //另一条  
    ctx.moveTo(250,400);
    ctx.lineTo(150,200);
    ctx.strokeStyle="red";
    ctx.lineWidth = 8;    //线条粗细
    ctx.stroke();  //描边

//渐变
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(160,160);
　　ctx.lineWidth = 8;    //线条粗细
    //定义线性渐变对象
    // ctx.strokeStyle = color | gradient | pattern
    var gra = ctx.createLinearGradient(0,0,200,200);
    gra.addColorStop(0,"black");
    gra.addColorStop(0.5,"red");
    gra.addColorStop(1,"yellow");

    ctx.strokeStyle = gra;
    ctx.stroke();

// 图像 这里注意要先load完图片再完成canvas...
    
    // 定义图像对象  createPattern(image,repetitionStyle)
    // ctx.strokeStyle = color | gradient | pattern
// 最后咱们再学习两个很简单的线段属性 lineCap 和 lineJoin。

// ⑴ lineCap是设定线段端点的形状（线帽），其值可以是

// butt 默认，即线条端点为平直的边缘
// round 线条端点为圆角线帽
// square 为线条端点添加正方形线帽

// ⑵ lineJoin则是设定折线的交接处的外角类型，其值可为：

// miter 默认，折线交接处为尖角

// round 折线交接处为圆角

// bevel 折线交接处为斜角



    var pic = new Image();
    pic.src = "test.jpg"
    

    function aa(){

        var pat = ctx.createPattern(pic,"repeat");        
        ctx.strokeStyle = pat;
        ctx.beginPath();
        ctx.moveTo(100,110);
        ctx.lineTo(350,360);
        ctx.lineCap = "round";
        ctx.lineWidth = 12;
        ctx.stroke();

    }

    pic.onload = aa;

/* ==========================================
    *   二  放射状渐变对象
    */
    var mycan2 = document.getElementById("mycan2"),ctx2 = mycan2.getContext("2d");
    //定义放射状渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
　　//ctx.createRadialGradient( Xstart, Ystart, Radiusstart, Xend, Yend, Radiusend )  其中前三个参数表示渐变起始圆形的中心坐标和半径，后三个参数表示渐变结束圆形的中点坐标和半径。

    var rag = ctx2.createRadialGradient(100,150,10,300,150,50);
    rag.addColorStop(0,"rgb(255,0,0)"); //定义渐变线起点颜色

    rag.addColorStop(0.5,"rgb(0,255,0)");  //定义渐变线中间点的颜色

 rag.addColorStop(1,"rgb(0,0,255)"); 
 ctx2.fillStyle = rag; ctx2.fillRect(0,0,400,300); 

//下面两句重置画布大小，从而清空画布 

//如果不想清除掉之前定义的样式，我们可以通过clearRect来实现 

// mycan2.width = mycan2.width; 

// mycan2.height = mycan2.height; 

// ctx.closePath(); 
//闭合多边形路径 ===================

 

 /* ==========================================
    *   三  学习如何绘制圆弧和贝塞尔曲线。
    */
    var mycan3 = document.getElementById("mycan3"),ctx3 = mycan3.getContext("2d");

    //在canvas中，绘制一条圆弧的语法如下：它称作“三次方贝塞尔曲线”
　　//ctx.arc( 圆心x坐标, 圆心y坐标, 圆的半径r , 开始角度, 结束角度 );
　　//如果我们要绘制一条起点不做方向控制的曲线，那么bezierCurveTo()方法就不再适用了。

    //针对这种情况，可以通过 quadraticCurveTo() 方法来解决，它称作“二次方贝塞尔曲线”，语法为 ctx.quadraticCurveTo( CEx, CEy, Ex, Ey );
　　//其中CEx、CEy表示曲线终点方向控制线末端的x坐标和y坐标。Ex、Ey表示曲线终点坐标。至于曲线起点则跟bezierCurveTo()一样，为该方法执行前画笔所在的位置。

　　//其中的 “开始角度” 和 “结束角度” 是相对360度的顺时针的极坐标而言的，可配合下图理解：
　　

    
    ctx3.arc(80,80,50,1/6*Math.PI,1/2*Math.PI);

    ctx3.stroke();

    //ctx.bezierCurveTo( CSx, CSy, CEx, CEy, Ex, Ey );
    //其中CSx、CSy表示贝塞尔曲线起点方向控制线末端的x坐标和y坐标。CEx、CEy表示贝塞尔曲线终点方向控制线末端的x坐标和y坐标。Ex、Ey表示贝塞尔曲线终点坐标。

　　//参考图如下，图中的贝塞尔曲线起点坐标为（20,20），终点坐标为（200,20），起点的方向控制线末端坐标为（20,100），终点的方向控制线末端坐标为（200,100）：


    ctx3.beginPath();
    ctx3.moveTo(20,20);
    ctx3.bezierCurveTo(20,100,200,200,150,20);
    ctx3.stroke();

 

 

/* ==========================================
    *   四  通过 strokeText() 和 fillText() 来绘制描边文本或者实心文本
        通过 font() 方法来做设置文本
        canvas默认文本在垂直方向是底部对齐的

        可通过定义 textBaseline 来改变文本在垂直方向的基线位置：

        可通过定义 textAlign 来改变文本在水平方向的基线位置

        可通过 measureText().width 方法来获取文本的宽度，进而判断是文本最终否会超出画布，如果会则取消绘制文本
        他没有高度。

        通过给 shadowColor 和 shadowBlur 赋值来给画布对象添加投影，前者是设置颜色（没有定义shadowColor的话默认为黑色），后者是设置要模糊的阶数（没有定义shadowBlur的话默认模糊阶数为0，也就是不对投影边缘做任何模糊）。

        通过 shadowOffsetX 和 shadowOffsetY 来设置投影在横坐标或纵坐标方向上的偏移：
    */
    var mycan4 = document.getElementById("mycan4"),ctx4 = mycan4.getContext("2d");
    var gradient4 = ctx4.createLinearGradient(0,0,mycan4.width,mycan4.height);
    gradient4.addColorStop("0","green");
    gradient4.addColorStop("1","rgba(200,255,10,0.5)");
    ctx4.moveTo(10,70);
    ctx4.lineTo(300,70);
    ctx4.stroke();
    ctx4.fillStyle = gradient4;
    ctx4.strokeStyle = "red";
    ctx4.textBaseline = "alphahetic";   //设置文本对齐方式
    var thetext = "获取文本宽度";
    var text_width = ctx4.measureText(thetext).width;  //获得文本宽度
    ctx4.font = "italic 40px Arial normal";    //设置文本样式
    ctx4.shadowColor = "blue";   //定义投影颜色为蓝色
    ctx4.shadowBlur = 15;    //定义投影模糊阶数为15像素
    ctx4.shadowOffsetX = 10;
    ctx4.shadowOffsetY = 10;
    ctx4.fillText("fillText",50,150);   // 渐变的这个实心的
    ctx4.strokeText("strokeText",50,70);    //红色空心的

/* ==========================================
    *   五.  canvas对图形对象的操作，包括图像、视频绘制，和操作像素对象的方法。
        其语法为：ctx.drawImage( img, clip_x, clip_y, clip_w, clip_h, x, y, width, height );
        canvas方法 clip() ，它是更地道的“裁剪”方法

        通过 createImageData(width,height) 方法来创建一个ImageData对象，
        然后通过 putImageData(imgData,x,y) 方法把ImageData对象放到画布上：

        ctx.putImageData( imgData, x, y, clip_X, clip_Y, clip_Width, clip_Height);

        clip_X,clip_Y分别表示相对于ImageData对象的裁剪起始点坐标，clip_Width, clip_Height表示要裁剪的矩形区域宽高。例如上面的例子我们可以稍微裁剪一下，裁剪成正方形吧：
        每一个ImageData对象都有其 width 和 height 属性，对应其宽度和高度：

        直接用 createImageData( imgData ) 的方式来获取已有的ImageData对象的尺寸，注意这里只会获取其尺寸，不会把已有对象的像素数据也复制了：

        即 getImageData() 方法，该方法返回一个 ImageData 对象，此对象拷贝了画布指定矩形区域的像素数据，其语法如下：

var newImgData=ctx.getImageData( x, y, width, height );
    */
    var mycan5 = document.getElementById("mycan5"),ctx5 = mycan5.getContext("2d");
    ctx5.strokeRect(10,0,mycan5.width-10,mycan5.height);
    var img = new Image();
    img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
    // img.onload = function(){
    //     ctx5.drawImage(img,0,0,200,200,40,30,200,200);
    // }
    ctx5.beginPath();
    ctx5.rect(60,60,100,100);
    ctx5.clip();

    img.onload = function(){
        ctx5.drawImage(img,20,20);

        ctx.drawImage(img,10,20,300,300,30,30,250,150);  //在画布坐标（30,30）的位置绘制一张宽度为250、高度150的图片，这种图片是在img上坐标为（10,20）的位置所裁剪出来的宽高均为300的区域
　　　　//注意这里被拉伸的图片已经不再是一开始的那张原始图了，而是原始图在其坐标（10,20）处开始裁剪到的宽高均为300的区域，也就是把这个裁剪到的区域，再伸缩为宽250、高150。

} ctx5.beginPath(); var imgData = ctx5.createImageData(200,200); for(var i=0,len = imgData.data.length;i<len;i+=4){ imgData.data[i+0] = 255; imgData.data[i+1] = 100; imgData.data[i+2] = 0; imgData.data[i+3] = 255; } ctx5.putImageData(imgData,200,200,20,0,150,150);

 

附上链接

http://www.cnblogs.com/vajoy/p/3925190.html