1.创建canvasvarcanvas=document.getElementById('canvas')varcontext=canvas.getContext('2d')使用context绘制2、可以设置线条的状态:(1)context.lineWidth(2)context.strokeStyle(3)context.fillStyle(4)context.lineCap=butt|round|square(5)lineJoin=miter|bevel|roundmiterLimit默认为10。斜接时有效。设置最大斜接距离。绘制直线：context.beginPath()--指定开始新的路径绘制，坐标点也会被清除。坐标点不是从0,0开始的。context.moveTo(100,100)--指定新的坐标点context.lineTo(200,200)--从上一个坐标点到当前坐标点context-closePath()--绘制结束，绘制闭合多边形上下文.lineWidth=10--定义绘图状态context.fillStyle='red'--定义绘图状态context.strokeStyle='red'--定义绘图状态context.fill()--绘图填充图形上下文.stroke()--画笔划画矩形：context.rect(x,y,width,height)context.fillRect(x,y,width,height)context.strokeRect(x,y,width,height)3、arc(1)arc:context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)(2)arcTo:context.arcTo(x1,y1,x2,y2,radius)(3)贝塞尔曲线context.quadraticCurveTo(x1,y1,x2,y2)起点坐标和终点坐标是函数的参数(4)贝塞尔三次曲线context.bezierCurveTo(x1,y1,x2,y2,x3,y3)4.文本的属性如下：(1)context.font(2)context.fillText(3)context.strokeText设置文本对齐属性(1)context.textAlign=left|middle|right(2)context.textBaseline=top|middle|bottomtextmeasurement:返回字符串的宽度context.measureText(string).width其中：font属性默认值为"20pxsans-serif"font可以设置5个值：font-style,字体变体、字体粗细、字体大小、字体系列(1)font-style=normal|italic|oblique(2)font-variant=noraml|small-caps(3)font-weight=normal|lighter|bold|bolder|400|700等(4)font-size=20px|20em|20rem(5)字体-家庭还可以使用@font-face和网络安全字体context.font="bold40pxArial"context.fillText('hello',10,10)context.lineWidth=1context.strokeText('hello',40,50）5、图形变换（1）context.translate：改变整个坐标系（2）context.rotate（3）context.scale（4）context.transform（a,b,c,d,e,f）：transformationmatrix(5)context.setTransform绘制后需要使用context.save()和context.restore()restore()恢复到save()之前的状态。否则将叠加后续状态转换。状态转换可以在save()和restore()之间自由切换，不影响后续操作。scale()不仅会改变尺寸，还会改变坐标和线宽等，具有一定的负面影响。6.fillStyle和strokeStyle填充（1）线性渐变vargrd=context.createLinearGradient(xstart,ystart,xend,yend)grd.addColorStop(0.0,color)grd.addColorStop(1.0,color)context.fillStyle=grd(2)radialgradientvargrd=context.createRadialGradient(x0,y0,r0,x1,y1,r1)grd.addColorStop(stop,color)(3)createPattern可以填充图片、画布和视频createPattern(img,repeat-style)repeat-style:no-repeat|repeat-x|repeat-y|repeatvarbgImg=newImage()bgImg.src="1.png"bgImg.onload=function(){varpattern=context.createPattern(bgImg,'no-重复'）;pattern.fillStyle=图案；context.fillRect(0,0,200,200);}7.阴影设置阴影有以下属性：(1)context.shadowColor(2)context.shadowOffsetX(3)context.shadowOffsetY(4）context.shadowBlurctx.fillStyle='red'ctx.shadowColor='black'ctx.shadowBlur=10ctx.fillRect(0,0,100,100)8.透明度设置全局透明度：globalAlpha=1设置交叉位置显示：globalCompositeOperation=source-over|destination-over等等，一共11种取值的9.Cutcontext.clip()这个方法会剪切当前画布。可以做出探照灯的效果。ctx.beginPath()ctx.arc(300,300,150,0,Math.PI*2);ctx.clip()ctx.font="bold150pxArial";ctx.fillStyle="black";ctx.fillText('Hello',300,300)10.图像处理(1)在画布上定位图像：JavaScript语法：context.drawImage(img,x,y);(2)将图片定位在画布上，并指定图片的宽高：JavaScript语法：context.drawImage(img,x,y,width,height);(3)裁剪图片，将裁剪的部分定位在画布上canvas:JavaScript语法：context.drawImage(img,sx,sy,swidth,height,x,y,width,height);(4)获取像素处理varimageData=context.getImageData(0,0,canvas.width,canvas.height)varpixelData=imageData.data(5)setPixelcontext.putImageData()(6)绘制像素级图像createImageData()window.onload=function(){canvas.width=800canvas.height=800varimageData=context.createImageData(canvas.width,canvas.height)varpixelData=imageData.datafor(vari=0;i
