canvas简单动画

最新推荐文章于 2025-05-21 07:30:58 发布

weixin_44552543

最新推荐文章于 2025-05-21 07:30:58 发布

阅读量578

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44552543/article/details/90574002

博客围绕canvas简单动画展开，虽未给出具体内容，但可知聚焦于利用canvas技术创建动画。canvas在前端开发中常用于图形绘制与动画制作，能为网页增添动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="text" height="300" width="300"></canvas>
</body>
<style>
    #text{
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        background: gray;
    }
</style>
<script type="text/javascript">
    window.onload=function () {
        var flag=0;
        var scale=0;
        var flagscale=0;
        var canvas=document.getElementById("text");
        if (canvas.getContext){
            var ctx=canvas.getContext("2d");
           setInterval(function () {
               flag++
               ctx.clearRect(0,0,canvas.width,canvas.height);
               ctx.save()
               ctx.translate(150,150)
               ctx.rotate(flag*Math.PI/180)


               //放大
               if (scale==100){
                   flagscale=-1
               }else if (scale==0){
                   flagscale=1
               }
               scale+=flagscale;
               ctx.scale(scale/50,scale/50)

               ctx.beginPath();
               ctx.fillRect(-50,-50,100,100);
               ctx.restore();
           },1)
        }
    }
</script>
</html>

在这里插入图片描述