<canvas id="canvas" width="500px" height="500px"></canvas>

var can=document.getElementById("canvas");
        if(can.getContext){
            var ctx=can.getContext("2d");
            //实心矩形(起点坐标,宽和长)
            ctx.fillStyle="red";
            ctx.fillRect(300,300,50,50);
            
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);

            //设置透明度
            //ctx.globalAlpha=0.8;

            //创建路径,描边圆形(圆心,半径,角度,方向)
            ctx.beginPath(); //新建一个起点
            ctx.arc(200,200,50,0,Math.PI*2,true);
            ctx.stroke();

            //创建路径(三角形)
            ctx.fillStyle="rgba(0,0,200,0.5)";
            ctx.beginPath();
            ctx.moveTo(100,100);
            ctx.lineTo(120,100);
            ctx.lineTo(100,120);
            ctx.fill();

            //二次贝塞尔(控制点,结束点)
            ctx.beginPath();
            ctx.moveTo(75,25);
            ctx.quadraticCurveTo(25,25,25,62.5);
            ctx.quadraticCurveTo(25,100,50,100);
            ctx.stroke();

            //三次贝塞尔(控制点1,,控制点2,结束点)
            ctx.beginPath();
            ctx.moveTo(75,40);
            ctx.bezierCurveTo(75,37,70,25,50,25);
            ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
            ctx.stroke();

            //Path2D 保存路径
            var bb=new Path2D();
            bb.rect(70,70,30,30);
            ctx.fill(bb);
            var cc=new Path2D(bb);
            ctx.fill(cc);

            //SVG paths
            var dd=new Path2D("M10 10 H80 V80 H-80 Z");
            ctx.strokeStyle="pink";
            ctx.stroke(dd);*/
            

            //linewidth设置线宽
            for(var i=0; i<10; i++){
                ctx.lineWidth=i+1;
                ctx.beginPath();
                ctx.moveTo(5 + i * 10, 5);
                ctx.lineTo(5+i*10,150);
                ctx.stroke();
            }

            //linecap设置线条末端样式
            var linecap=["butt","round","square"];
            ctx.strokeStyle="green";
            for(var i=0;i<linecap.length;i++){
                ctx.lineWidth=10;
                ctx.lineCap=linecap[i];
                ctx.beginPath();
                ctx.moveTo(150+i*20,10);
                ctx.lineTo(150+i*20,150);
                ctx.stroke();
            }

            //lineJoin设置线条接合处样式
            var linejoin=["round","bevel","miter"];
            ctx.strokeStyle="gold";
            for(var i=0;i<linecap.length;i++){
                ctx.lineWidth=10;
                ctx.lineJoin=linejoin[i];
                ctx.beginPath();
                ctx.moveTo(300,10+i*20);
                ctx.lineTo(350,50+i*20);
                ctx.lineTo(400,10+i*20);
                ctx.lineTo(450,50+i*20);
                ctx.lineTo(500,10+i*20);
                ctx.stroke();
            }

            //miterLimit设置相交最大长度
            var miterlimit=["round","bevel","miter"];
            ctx.strokeStyle="green";    
                ctx.lineWidth=10;
                ctx.miterLimit=1;
                ctx.beginPath();
                ctx.moveTo(300,100);
                ctx.lineTo(350,150);
                ctx.lineTo(400,100);
                ctx.lineTo(450,150);
                ctx.lineTo(500,100);
                ctx.stroke();

            //setLineDash lineDashOffset设置虚线
            var offset=0;
            function draw(){
                offset=offset+3;
                ctx.clearRect(0,0,canvas.width, canvas.height);
                ctx.setLineDash([4,6]);  //接收数组
                ctx.lineDashOffset= -offset;
                ctx.strokeRect(10,20,200,200);
                if(offset>20){
                    offset=0;
                }
            }
            setInterval(draw,200);

            //linearGradient线性渐变
            var fff=ctx.createLinearGradient(100,100,50,150); //渐变的起点和终点
            fff.addColorStop("0","black");
            fff.addColorStop("1","red");
            ctx.fillStyle=fff;
            ctx.fillRect(10,100,50,150);*/

            //radialgradient/radgrad径向渐变
            /*var ggg=ctx.createRadialGradient(100,150,30,100,150,50); //圆心,半径/圆心,半径
            ggg.addColorStop("0","black");
            ggg.addColorStop("0.9","red");
            ggg.addColorStop(1,‘rgba(1,159,98,0)‘);
            ctx.fillStyle=ggg;
            ctx.fillRect(50,100,100,100);

            //创建新图案,用图案填充
            var img= new Image();
            img.src="http://www.mamicode.com/images/4.png"; //不可放在后面
            img.onload=function(){
                var ppr=ctx.createPattern(img,"no-repeat");
                ctx.fillStyle=ppr;
                ctx.fillRect(300,200,50,50);
             }
            
            //创建文本阴影效果
            ctx.shadowOffsetX= 2;
            ctx.shadowOffsetY= 2;
            ctx.shadowBlur= 5;
            ctx.shadowColor= "red";
            ctx.font="20px ‘楷体‘";
            ctx.fillText("哈哈",100,50);  //填充字体(坐标)  

            //填充规则
            ctx.beginPath();
            ctx.moveTo(250,200);
            ctx.arc(200,200,50,0,Math.PI*2,true);
            ctx.arc(200,200,30,0,Math.PI*2,true);
            ctx.fill("evenodd");  //默认值‘nonzero‘

            //绘制文字(描边文字)
            ctx.shadowOffsetX= 2;
            ctx.shadowOffsetY= 2;
            ctx.shadowBlur= 5;
            ctx.shadowColor= "red";
            ctx.font="50px ‘楷体‘";
            ctx.strokeText("嘻嘻",100,50);

            //基线校准
            ctx.font="50px serif";
            ctx.textAlign="left";
            ctx.textBaseline="top";
            ctx.strokeText("hello",100,50);

            //应用图像
            var img= new Image();
            img.src="http://www.mamicode.com/images/4.png";
            img.onload=function(){
                ctx.drawImage(img,50,50);//坐标
                ctx.beginPath();
                ctx.moveTo(100,100);
                ctx.lineTo(120,100);
                ctx.lineTo(100,120);
                ctx.fill();
            }

            //缩放图像
            var img= new Image();
            img.src="http://www.mamicode.com/images/4.png";
            img.onload=function(){
                for(var i=0;i<4;i++){
                    for(var j=0;j<4;j++){
                        ctx.drawImage(img,j*60,i*60,60,60);  //坐标,图片的大小
                    }
                }
            }

            //切片
            var img1= new Image();
            img1.onload=function(){
                //所切图片的切片位置和大小,目标显示位置和大小
                ctx.drawImage(img1,250,250,200,200,0,0,100,100);
                }
            img1.src="http://www.mamicode.com/images/1.png"; //可以放在后面,可识别
            var img2= new Image();
            img2.src="http://www.mamicode.com/images/2.png";
            img2.onload=function(){
                //所切图片的切片位置和大小,目标显示位置和大小
                ctx.drawImage(img2,250,250,500,500,10,10,80,80);
             }

             //保存(属性)与还原 save,restore与栈相似
            　ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings
        　　  ctx.save();                  // Save the default state
        　　
        　　  ctx.fillStyle = ‘#09F‘       // Make changes to the settings
        　　  ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
        　　
        　　  ctx.save();                  // Save the current state
        　　  ctx.fillStyle = ‘#FFF‘       // Make changes to the settings
        　　  ctx.globalAlpha = 0.5;    
        　　  ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings
        　　
        　　  ctx.restore();               // Restore previous state
        　　  ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings
        　　
        　　  ctx.restore();               // Restore original state
        　　  ctx.fillRect(60,60,30,30);*/   // Draw a rectangle with restored settings

            //旋转canvas坐标 rotate/translate移动canvas坐标原点
        　　ctx.translate(100,100);
            for (var i=1;i<6;i++){ 
            // Loop through rings (from inside to out)
        　　    ctx.fillStyle = ‘rgb(‘+(51*i)+‘,‘+(255-51*i)+‘,255)‘;        　　
        　　    for (var j=0;j<i*6;j++){ 
            // draw individual dots
        　　      ctx.rotate(Math.PI*2/(i*6));
        　　      ctx.beginPath();
        　　      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
        　　      ctx.fill();
        　　    }
            }
    } else {
        console.log("not support");
    }