ctx.moveTo(0,0);ctx.lineTo(100,100);ctx.stroke();画圆形ctx.arc(x,y,radius,0,2*Math.PI,true)
ctx.beginPath();ctx.arc(300,300,50,0,2*Math.PI,true);ctx.strokeStyle='#000';ctx.stroke();画矩形ctx.strokeRect(x1,y1,x2,y2)
ctx.strokeRect(300,100,200,100);beginPath()开始一条新路径closePath()使当前路径闭合不是成对出现的
ctx.beginPath();ctx.moveTo(300,0);ctx.lineTo(200,100);ctx.lineTo(200,200);ctx.closePath();ctx.strokeStyle='#0F0';ctx.stroke();设置样式
ctx.moveTo(0,0);ctx.lineTo(100,100);ctx.lineTo(100,200);ctx.closePath();//lineWidth设置描边的线宽ctx.lineWidth=10;//strokeStyle设置描边样式ctx.strokeStyle="#F00";ctx.stroke();//fillStyle设置填充样式ctx.fillStyle="rgba(0,255,0,0.5)";ctx.fill();绘制矩形与样式同步
ctx.strokeRect(100,200,100,100);ctx.fillRect(100,200,100,100);保存和恢复上下文环境，一般成对出现save保存当前绘画环境，包括变换和样式restore恢复当前绘画环境，包括变换和样式
ctx.save();ctx.restore();图形变换
//translate平移变换ctx.translate(0,100);ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(100,100);ctx.stroke();//rotate旋转变换ctx.rotate(Math.PI/4);ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(100,100);ctx.lineWidth=5;ctx.strokeStyle="#F00";ctx.stroke();//scale缩放变换ctx.scale(1,0.5);ctx.fillRect(0,-100,100,100);线性渐变
varlinearGradient=ctx.createLinearGradient(0,0,200,0);//给渐变添加颜色linearGradient.addColorStop(0,'rgb(255,0,0)');linearGradient.addColorStop(0.3,'rgb(0,255,0)');linearGradient.addColorStop(1,'rgb(0,0,255)');//设置渐变作为样式ctx.fillStyle=linearGradient;ctx.fillRect(0,0,200,200);径向渐变
varradialGradient=ctx.createRadialGradient(400,50,0,400,150,100);radialGradient.addColorStop(0,'rgb(255,255,0)');radialGradient.addColorStop(1,'rgb(0,0,0)');ctx.fillStyle=radialGradient;ctx.beginPath();ctx.arc(400,150,100,0,Math.PI*2,true);ctx.fill();文字
字体若设置了居中，圆心会在文字的中间位置，所以圆心还是要根据画布大小和文字的宽度进行设置。
varstr="helloworld";//设置文本样式，比如大小，字体ctx.font="50pxsans-serif";//水平对其设置，leftcenterrightctx.textAlign="center";//垂直对齐设置，topmiddlebottomctx.textBaseline="top";//填充文本ctx.fillText(str,300,0);//描边文本ctx.strokeText(str,0,200);//获取文本宽度varwidth=ctx.measureText(str).width;console.log(width);图片
ctx.fillRect(0,0,canvas.width,canvas.height);varimg=newImage();img.src="logo.png";//一定要在图像加载完成后的回调中绘制图像img.onload=function(){//在（0,0）点处绘制img图像//ctx.drawImage(img,0,0);//在（0,0）点处绘制img图像，缩放成256*80//ctx.drawImage(img,0,0,256,80);//获取img图像的（0,0）点处的40*40区域，绘制在（100,100）点处，缩放成80*80ctx.drawImage(img,0,0,40,40,100,100,80,80);}创建图像画刷ctx.createPattern(image,type)
ctx.fillRect(0,0,canvas.width,canvas.height);varimg=newImage();img.src="logo.png";img.onload=function(){//创建图像画刷，no-repeat,repeat-x,repeat-y,repeatvarpattern=ctx.createPattern(img,"repeat");ctx.fillStyle=pattern;ctx.fillRect(0,0,canvas.width,canvas.height);}阴影绘制
//阴影的X偏移ctx.shadowOffsetX=10;//阴影的Y偏移ctx.shadowOffsetY=10;//阴影的颜色ctx.shadowColor='rgba(0,0,0,0.5)';//阴影的模糊度ctx.shadowBlur=10;ctx.fillStyle='rgba(255,0,0,0.5)';ctx.fillRect(100,100,100,100);ctx.font="50pxsans-serif";ctx.fillText("我是小可爱",200,100);区域剪辑
//保存当前环境ctx.save();ctx.arc(300,100,200,0,Math.PI*2,true);//进行区域剪辑ctx.clip();ctx.fillStyle="#F00";ctx.fillRect(100,100,200,200);//恢复环境，释放了剪辑区域的作用ctx.restore();绘制曲线ctx.arc(x,y,startAngle,endAngle,Math.PI*2,true)最后一个参数代表是否是逆时针方向
动画
ctx.clearRect(x,y,width,height)清除区域，用于重新绘制
varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d');varposx=0,posy=0,dir=1,isMouseInRect=false;//确定动画范围canvas.onmousemove=function(e){varmouseX=e.offsetX;varmouseY=e.offsetY;if(mouseX>posx&&mouseY
index.html
*{margin:0;padding:0;}html,body{height:100%;}.left-div{width:30%;height:100%;float:left;background:#a4a296;}.line{text-align:center;margin-top:30px;}.line:first-child{margin-top:200px;}.linespan{color:white;}.lineinput{width:300px;height:30px;border-radius:15px;padding-left:15px;outline:none;border:none;}.linebutton{width:100px;height:30px;outline:none;border:none;background:#222;color:#DDD;cursor:pointer;position:relative;border-radius:15px;}.linebutton:hover{background:#000;color:#FFF;}.linebutton:active{left:1px;top:1px;}.right-div{width:70%;height:100%;float:left;background:#eee9d3;text-align:center;position:relative;}.right-divcanvas{position:absolute;top:200px;left:50%;margin-left:-300px;}#cardCanvas{display:none;}