canvas实战之一(画图，矩阵转换，定时)

最新推荐文章于 2024-04-12 10:30:40 发布

原创最新推荐文章于 2024-04-12 10:30:40 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何使用JavaScript和HTML5 Canvas API创建一个可以旋转的多彩Logo。通过平移、绘制圆形及旋转变换实现动态效果，并借助定时器使Logo持续旋转。

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

利用学到的东东做点东西

首先画三个圆

circle circle

function drawLogo(){   //画个logo
            ctx.translate(100,60);   //将画布中心转移到(100,60)处
            
            ctx.beginPath();
            ctx.fillStyle="#ff0000";
            ctx.arc(-25,-20,25,0,2*Math.PI,false);
            ctx.fill();
            ctx.beginPath();
            ctx.fillStyle="#00ff00";
            ctx.arc(25,-20,25,0,2*Math.PI,false);
            ctx.fill();
            ctx.beginPath();
            ctx.fillStyle="#0000ff";
            ctx.arc(0,25,25,0,2*Math.PI,false);
            ctx.fill();


        }

然后让他转动起来

rotate

结果就变成一坨。。。不是，变成一个无敌风火轮了。

很显然，转动的话，可以让它绕中心旋转，这里可以用简单的rotate，当然也可以用矩阵转换

function transform(){
            getCtx();  //获取context
            drawLogo();

             //开始转动
            var sina = Math.sin(30*Math.PI/180);
            var cosa = Math.cos(30*Math.PI/180);
            ctx.transform(cosa,sina,-sina,cosa,0,0);
            ctx.fill();
            // ctx.rotate(30*Math.PI/180);
             ctx.translate(-100,-60);   //将中心还原回去，不然会奇怪

        }

接下来就是定时调用了

<!-- 我的画布 -->
        <script type="text/javascript">
            setInterval(transform,1000);
            // setTimeout(transform,1000);
        </script>

就这样粗来啦！！！