系列文章目录本文以canvas入手，通俗易懂，小白无烦恼。根据沐客网刘宇博博老师的视频课，我们整理了视频课，指导：刘宇博博老师炫酷的倒计时效果。Canvas绘图和动画基础1.在标签上声明标签宽高20pxauto;">当前浏览器不支持Canvas，请更换浏览器后再试在js中设置宽高当前浏览器不支持canvas，请更换浏览器后再试window.onload=function(){//getvarcanvas=document.getElementById('canvas')canvas.width=1024canvas.height=768//判断浏览器是否可以使用canvasif(canvas.getContext('2d')){//使用2d绘图varcontext=canvas.getContext('2d')//使用context绘制}else{alert('当前浏览器不支持canvas，请更换浏览器重试')}}2、画直线canvas先设置状态最后画直线js代码context.moveTo(x,y)起点context.lineTo(x,y)终点context.lineWidth=5线宽context.strokeStyle='#005588'线型context.stroke()drawwindow.onload=function(){varcanvas=document.getElementById('canvas')canvas.width=1024canvas.height=768if(canvas.getContext('2d')){varcontext=canvas.getContext('2d')//使用context绘制//从坐标(100,100)开始context.moveTo(100,100)//画一条直线，以坐标(700,700)为终点context.lineTo(700,700)//线宽为5context.lineWidth=5//线条样式和颜色context.strokeStyle='#005588'//执行绘制直线的操作context.stroke()}else{alert('当前浏览器不支持画布，请换个浏览器再试试')}}效果3.由线组成的图形-画一个三角形window.onload=function(){varcanvas=document.getElementById('canvas')canvas.width=1024canvas.height=768if(canvas.getContext('2d')){varcontext=canvas.getContext('2d')//使用上下文绘制//从坐标(100,100)开始context.moveTo(100,100)context.lineTo(700,700)上下文。lineTo(100,700)context.lineTo(100,100)//线宽为5context.lineWidth=5//线型颜色context.strokeStyle='#005588'//执行画线操作context.stroke()}else{alert('当前浏览器不支持canvas,请换个浏览器再试')}}4.多边形填充和描边context.fillStyle='rgb(2,100,30)'填充颜色context.fill()fillwindow.onload=function(){varcanvas=document.getElementById('canvas')canvas.width=1024canvas.height=768if(canvas.getContext('2d')){varcontext=canvas.getContext('2d')//使用上下文从开始绘制//withcoordinates(100,100)context.moveTo(100,100)//画一条直线以坐标(700,700)为终点context.lineTo(700,700)context.lineTo(100,700)context.lineTo(100,100)//线宽为5context.lineWidth=5//线型颜色context.strokeStyle='#f00'//执行绘制直线的操作context.stroke()//多边形填充context.fillStyle='rgb(2,100,30)'context.fill()}else{alert('当前浏览器不支持canvas，请更换浏览器后再试')}}5.定义两个shapescontext.beginPath()启动context。closePath()结束这两个方法将这两个路径包裹起来以将它们与其他路径分开window.onload=function(){varcanvas=document.getElementById('canvas')canvas.width=1024canvas.height=768if(canvas.getContext('2d')){varcontext=canvas.getContext('2d')//使用上下文从坐标绘制//00,100)为起点context.beginPath()context.moveTo(100,100)//画一条直线以坐标(700,700)为终点context.lineTo(700,700)context.lineTo(100,700))context.lineTo(100,100)context.closePath()//线宽为5context.lineWidth=5//线型颜色context.strokeStyle='#f00'//执行绘制直线的操作context.stroke()////多边形填充//context.fillStyle='rgb(2,100,30)'//context.fill()context.beginPath()context.moveTo(200,100)context.lineTo(700,600))context.closePath()context.strokeStyle='#000'context.stroke()}else{alert('当前浏览器不支持canvas，请更换浏览器重试')}}6.html部分Tangramdemo示例当前浏览器不支持canvas，请换浏览器再试自制数据部分vartangram=[{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400},],color:'#caff67'},{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800},],颜色:'#67becf'},{p:[{x:0,y:800},{x:400,y:400},{x:400,y:800},],color:'#f50'},{p:[{x:400,y:800},{x:800,y:800},{x:400,y:400},],color:'#0f5'},{p:[{x:400,y:400},{x:800,y:0},{x:600,y:600},],color:'#25f'},{p:[{x:800,y:0},{x:600,y:600},{x:800,y:800},],color:'#f33'},]js部分letcanvas=document.getElementById('canvas')if(canvas.getContext('2d')){varcontext=canvas.getContext('2d')tangram.forEach((item,index)=>{draw(item,context)})}functiondraw(piece,cxt){cxt.beginPath()cxt.moveTo(piece.p[0].x,piece.p[0].y)piece.p.forEach((item,index)=>{cxt.lineTo(item.x,item.y)})cxt.closePath()cxt.fillStyle=piece.colorcxt.fill()cxt.lineWidth=2cxt.strokeStyle='#000'cxt.stroke()}7、绘制正方形状demo不能使用画布总结本文问的是canvas的第一段，后面会继续更新，如果觉得还是很有用的，关注或者点击点赞就好，谢谢
