目录
什么是 canvas画板涂鸦动画进度条动画写在最后什么是 canvas
canvas 是 HTML5 新定义的标签，通过使用脚本（通常是 JavaScript）绘制图形。允许脚本语言动态渲染位图像。
canvas > 标签只是图形容器，相当于一个画布，canvas元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript内部完成，相当于使用画笔在画布上画画。
canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。
下边是两个简单的小案例，带你领略canvas的魅力~
画板涂鸦动画
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas{background-color:ivory;display: block;margin: 0 auto;}</style></head><body><canvas width="500" height="500"></canvas><script>var canvas=document.querySelector("canvas"); var cobj=canvas.getContext("2d");//颜色cobj.strokeStyle="red";//粗细cobj.lineWidth="3";canvas.onmousedown=function(e){var ox=e.offsetX;var oy=e.offsetY;cobj.beginPath();//将画笔移动到某个位置 落笔 cobj.moveTo(ox,oy);canvas.onmousemove=function(e){var ox=e.offsetX;var oy=e.offsetY;cobj.lineTo(ox,oy);cobj.stroke();}canvas.onmouseup=function(){canvas.onmousemove=null;}}</script></body></html>
进度条动画
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas{background-color:ivory;display: block;margin: 0 auto;}</style></head><body><canvas width="500" height="500"></canvas><script>//动画 0——75% 进度变化var canvas=document.querySelector("canvas");var cobj=canvas.getContext("2d");var n=1;function anim(){n++;//1~100;var angle=2*Math.PI*n/100-Math.PI/2;//var angle=2*Math.PI*n/100;cobj.clearRect(0,0,500,500);//轮廓绘制cobj.strokeStyle = "black";cobj.lineWidth = "1";cobj.beginPath();cobj.arc(250,250,88,0,2*Math.PI);cobj.stroke();cobj.beginPath();cobj.arc(250,250,112,0,2*Math.PI);cobj.stroke();cobj.lineWidth = "20";cobj.lineCap = "round";cobj.strokeStyle = "red";cobj.textAlign = "center";cobj.textBaseline = "middle";cobj.font="30px 微软雅黑";cobj.beginPath();cobj.arc(250,250,100,-Math.PI/2,angle);cobj.stroke();cobj.fillText(n+"%",250,250);if(n<=74){requestAnimationFrame(anim);}}var raf=requestAnimationFrame(anim);</script></body></html>
写在最后
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
原创不易，期待你的关注与支持~
点赞❤+收藏❤+评论❤
之后我会继续更新前端学习小知识，关注我不迷路~
