> 文档中心 > canvas画板涂鸦动画&进度条动画

canvas画板涂鸦动画&进度条动画

目录

  • 什么是 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>

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> //动画 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>

canvas画板涂鸦动画&进度条动画

写在最后

希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~
原创不易,期待你的关注与支持~
点赞❤+收藏❤+评论❤
之后我会继续更新前端学习小知识,关注我不迷路~

canvas画板涂鸦动画&进度条动画 创作打卡挑战赛 canvas画板涂鸦动画&进度条动画 赢取流量/现金/CSDN周边激励大奖51mike麦克疯