canvas画简易loading

最新推荐文章于 2024-05-09 08:19:04 发布

秋色暮光

最新推荐文章于 2024-05-09 08:19:04 发布

阅读量301

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_45924425/article/details/126420889

版权

html

<canvas id="canvas" width="150" height="150" />

css

        #canvas{
            animation-name: rotate;	//动画名称
            animation-duration: 2.5s;	//动画每次运行时间
            animation-iteration-count: infinite;	//动画不断重复
            animation-timing-function: cubic-bezier(0.3, 0.03, 0.68, 0.93);	//动画的运行速度
        }
        
		//旋转动画
        @keyframes rotate {
        	0% { transform: rotateZ(360deg); }
            100% { transform: rotateZ(0deg); }
        }

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
        
ctx.lineWidth = 40	//设置线的宽度
for(i=2; i>=0; i-=0.125){
	ctx.strokeStyle = 'rgba(00, 00, 00,'+ i +')'	//设置画笔颜色不断变浅
	ctx.beginPath()	//不断重复开始画笔
    ctx.arc(75, 75, 40, i*Math.PI, (i+0.01)*Math.PI);	//每条线的位置和大小
    ctx.stroke()	//画每一条线
}