Canvascanvas是HTML5所有新特性中我最喜欢的标签。因为它太强大了，可以实现各种有趣的特效。1.canvas的基本用法——它是一个内联块元素——默认大小是300x150，你不能在css中给它设置样式，只能在标签里写它的属性。比如width=400,height=300-获取画布varcanvas=document.querySelector("canvas")-getbrush(context)varctx=canvas.getContext('2d')2.Canvas绘制基本图形填充矩形ctx.fillRect(0,0,100,100)fill：与填充相关Rect：绘制矩形Fill形状设置样式ctx.fillStyle='green'描边矩形ctx.strokeRect(100,100,100,100)描边形状设置样式ctx.strokeStyle='white'ctx.lineWidth=100清除整个画布ctx.clearRect(0,0,canvas.width,canvas.height)绘制线段ctx.moveTo(100,100)ctx.lineTo(100,100)strokectx.stroke()fillctx.fill()-起点和终点连接ctx.closePath()ctx.save()开始......ctx.restore()End3.CanvasClock使用canvas我们可以绘制一个时钟，包括刻度和时针，通过timer使用Data对象可以不时更新每一秒的刻度。varcanvas=document.querySelector("canvas");varctx=canvas.getContext("2d");functionmove(){ctx.save()ctx.translate(300,300)//初始化一些常用样式ctx.lineCap='round'ctx.strokeStyle='black'ctx.lineWidth=8ctx.scale(0.5,0.5)//绘制外圈ctx.save();ctx.beginPath();ctx.strokeStyle='金色';ctx.arc(0,0,150,0,2*Math.PI);ctx.stroke();ctx.restore();//在ctx.save()里面绘制刻度ctx.beginPath();对于(vari=0;i<12;i++){ctx.moveTo(0,-125);ctx.lineTo(0,-140);ctx.stroke()ctx.rotate(30*Math.PI/180)}ctx.restore()//分钟刻度ctx.save()ctx.lineWidth=3for(vari=0;i<60；i++){如果(i%5!=0){ctx.beginPath()ctx.moveTo(0,-135);ctx.lineTo(0,-140);ctx.stroke()}ctx.rotate(6*Math.PI/180)}ctx.restore()//当前时间vardate=newDate()vars=date.getSeconds()varmin=date.getMinutes()+s/60varh=date.getHours()+min/60//时针ctx.save()ctx.rotate(30*h*Math.PI/180)ctx.lineWidth=14ctx.beginPath()ctx.moveTo(0,-80)ctx.lineTo(0,20)ctx.stroke()ctx.restore()//分针ctx.save()ctx.lineWidth=10ctx.rotate(6*min*Math.PI/180)ctx.beginPath()ctx.rotate(-30*Math.PI/180)ctx.moveTo(0,-120)ctx.lineTo(0,30)ctx.stroke()ctx.restore()//二手ctx.save()ctx.lineWidth=6ctx.strokeStyle='pink'ctx.fillStyle='粉色'ctx.rotate(6*s*Math.PI/180)ctx.beginPath()ctx.arc(0,0,10,0,2*Math.PI)ctx.fill()ctx.beginPath()ctx.moveTo(0,-125)ctx.lineTo(0,30)ctx.stroke()ctx.beginPath()ctx.arc(0,-135,10,0,2*Math.PI)ctx。stroke()ctx.restore()ctx.restore()}setInterval(function(){ctx.clearRect(0,0,canvas.width,canvas.height)move()},1000)静态图如下图scratchcardEffect利用canvascomposition的属性可以实现图像合成的效果。特别适用于刮刮卡。globalCompositeOperation属性设置或返回如何将源（新）图像绘制到目标（现有）图像上.querySelector("canvas")varctx=getCtx()log(ctx)ctx.fillStyle='yellow'ctx.fillRect(0,0,400,400)ctx.globalCompositeOperation='destination-out';//鼠标按下canvas.onmousedown=function(event){ctx.beginPath()ctx.arc(event.clientX-canvas.offsetLeft,event.clientY-canvas.offsetTop,20,0,2*Math.PI)ctx.fill()//鼠标移动document.onmousemove=function(event){ctx.beginPath()ctx.arc(event.clientX-canvas.offsetLeft,event.clientY-canvas.offsetTop,20,0,2*Math.PI)ctx.fill()}//鼠标向上document.onmouseup=function(){document.onmousemove=document.onmouseup=null}returnfalse}
