Canvas是HTML5提供的用于显示绘图效果的标签。Canvas原意是画布，用于在HTML页面中显示绘图效果。最早的Canvas是Apple提出的解决方案，目前已经在大多数浏览器中实现。canvas的使用领域游戏大数据可视化数据banner广告多媒体模拟模拟远程操作图形编辑判断浏览器是否支持canvas标签varcanvas=document.getElementById('canvas')if(canvas.getContext){console.log('你的浏览器支持Canvas！')}else{console.log('你的浏览器不支持Canvas!')}canvas的基本使用1.使用canvas标签在页面上创建一个网格区域，并设置其宽度Height，宽高分别为300和1502.获取dom元素canvasCanvas本身无法绘制。JavaScript用于完成绘图。画布对象提供各种绘图API。varcas=document.querySelector('canvas')3.通过cas获取context对象（canvas对象！）varctx=cas.getContext('2d')4.通过ctx开始绘制（设置起点，设置终点point)side)ctx.moveTo(10,10)ctx.lineTo(100,100)ctx.stroke()画线设置起始位置：context.moveTo(x,y)设置结束位置：context.lineTo(x,y)stroke边缘绘制：context.stroke()填充绘制：context.fill()闭合路径：context.closePath()Canvas还可以设置线条的相关属性，如下：CanvasRenderingContext2D.lineWidth设置线条宽度。CanvasRenderingContext2D.strokeStyle设置线条颜色。CanvasRenderingContext2D.lineCap设置线端类型，'butt'（默认），'round'，'square'。CanvasRenderingContext2D.lineJoin设置相交线的拐点，'miter'（默认），'round'，'bevel'，CanvasRenderingContext2D.getLineDash()获取线段样式数组。CanvasRenderingContext2D.setLineDash()设置线段样式。CanvasRenderingContext2D.lineDashOffset绘制线段偏移量。封装了一个绘制矩形的方法functionmyRect(ctxTmp,x,y,w,h){ctxTmp.moveTo(x,y)ctxTmp.lineTo(x+w,y)ctxTmp.lineTo(x+w,y+h)ctxTmp.lineTo(x,y+h)ctxTmp.lineTo(x,y)ctxTmp.stroke()}varcas=document.querySelector('canvas')varctx=cas.getContext('2d')复制代码myRect(ctx,50,50,200,200)画一个矩形fillRect(x,y,width,height)从(x,y)开始分别用宽度和高度填充一个矩形。默认为黑色stokeRect(x,y,width,height)以(x,y)为起点绘制一个空心矩形，宽度和高度为width和heightheight的矩形透明绘制圆弧。画圆弧的方法有CanvasRenderingContext2D.arc()CanvasRenderingContext2D.arcTo()6个参数：x,y（圆心坐标），radius，起始弧度（不是角度deg），end，（bool设置方向!)varcas=document.querySelector('canvas')varctx=cas.getContext('2d')ctx.arc(100,100,100,0,degToArc(360))ctx.stroke()//角度转弧functiondegToArc(num){return(Math.PI/180)*num}drawfanvarcas=document.querySelector('canvas')varctx=cas.getContext('2d')ctx.arc(300,300,200,degToArc(125),degToArc(300))//自动回连原点ctx.closePath()ctx.stroke()functiondegToArc(num){return(Math.PI/180)*num}创建一个画笔在鼠标按下时声明一个变量作为标记，在鼠标移动时记录起始位置，在鼠标抬起时开始绘制连接，关闭开关点击查看效果图varcas=document.querySelector('canvas')varctx=cas.getContext('2d')varisDraw=false//鼠标按下事件cas.addEventListener('mousedown',function(){isDraw=truectx.beginPath()})//鼠标移动事件cas.addEventListener('mousemove',function(e){if(!isDraw){//return没有按下}//获取相对于容器的坐标varx=e.offsetXvary=e.offsetYctx.lineTo(x,y)ctx.stroke()})cas.addEventListener('mouseup',function(){//开关关闭！isDraw=false})手动擦除原理和canvas类似，只是使用clearRect()方法查看渲染varcas=document.querySelector('canvas')varctx=cas.getContext('2d')ctx.fillRect(0,0,600,600)//开关varisClear=falsecas.addEventListener('mousedown',function(){isClear=true})cas.addEventListener('mousemove',函数(e){if(!isClear){return}varx=e.offsetXvary=e.offsetYvarw=20varh=20ctx.clearRect(x,y,w,h)})cas.addEventListener('mouseup',function(){isClear=false})Scratch游戏首先需要设置奖品和画布，将画布排列在图片上方覆盖，并随机设置奖品。随着手的触摸和移动，可以擦除部分画布以显示奖品区域。点击查看效果图
