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

来源：互联网发布：犀牛软件视角加速器编辑：程序博客网时间：2024/06/02 05:31

利用学到的东东做点东西

首先画三个圆

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>

就这样粗来啦！！！

0 0