canvas为什么setInterval内的函数还要重新定位坐标

2015-06-09 12:03:58 155 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

lyf1991a 墨衍会员 · AI 创作全网分发关注 + 加入社区

微信小程序Canvas实战：手把手教你画一个会走的模拟时钟（附完整源码）本文详细介绍了如何在微信小程序中使用Canvas绘制动态模拟时钟，从基础环境搭建到核心代码实现，包括表盘绘制、指针动画及性能优化技巧。通过实战案例，帮助开发者掌握Canvas绘图技术，实现流畅的时钟动画效果，并附完整源码供参考。阅读详情

自己做个时钟，我是用setInterval来循环，但是为什么如果我setInterval函数内没有重新translate的话它就回到原点了？



<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset=utf-8>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="renderer" content="webkit">

    <script type="text/javascript">

        window.onload = function(){

            var canvas = document.getElementById("canvas");

            var context = canvas.getContext("2d");

            var outRadius = 200;

            var innerRadius = 190;

            var hour, minute, second;

            var savedCanvas;



            context.save();

            context.textAlign = "center";

            context.textBaseline = "middle";

            context.font = "14px Arial";

            context.translate(250, 250);

            //画圆

            context.beginPath();

            context.arc(0, 0, outRadius, 0, Math.PI * 2);

            context.stroke();



            //画刻度

            for(var i = 0; i < 60; i++){

                context.beginPath();

                context.moveTo(outRadius * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),

                        outRadius * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));

                if(i % 5 == 0){

                    var text = "12";

                    context.lineTo((innerRadius - 10) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),

                            (innerRadius - 10) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));

                    if(i !=  0){

                        text = (i / 5).toString();

                    }

                    context.strokeText(text, (innerRadius - 24) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),

                            (innerRadius - 24) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));

                }

                context.lineTo(innerRadius * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),

                        innerRadius * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));

                context.stroke();

            }

            //画圆心

            context.beginPath();

            context.arc(0, 0, 5, 0, Math.PI * 2);

            context.fill();



            savedCanvas = context.getImageData(0, 0, canvas.width, canvas.height);



            //循环时间

            setInterval(drawPoninter, 1000);



            function drawPoninter(){

                hour = new Date().getHours();

                minute = new Date().getMinutes();

                second = new Date().getSeconds();

                context.putImageData(savedCanvas, 0, 0, 0, 0, canvas.width, canvas.height);



                context.save();

                context.translate(250, 250);

                //画时针

                context.beginPath();

                context.moveTo(0, 0);

                context.lineTo((outRadius - 100) * Math.cos(-Math.PI / 2 + (Math.PI / 6 * hour)),

                        (outRadius - 100) * Math.sin(-Math.PI / 2 + (Math.PI / 6 * hour)));

                context.stroke();



                //画分针

                context.beginPath();

                context.moveTo(0, 0);

                context.lineTo((outRadius - 80) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * minute)),

                        (outRadius - 80) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * minute)));

                context.stroke();



                //画秒针

                context.beginPath();

                context.moveTo(0, 0);

                context.lineTo((outRadius - 50) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * second)),

                        (outRadius - 50) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * second)));

                context.stroke();



                context.restore();

            }



            context.restore();

        };

    </script>

    <title></title>

</head>

<body>

<canvas id="canvas" width="500" height="500" style="display: block; margin: 30px auto; border: 1px solid #ccc; color: rgba(100, 140, 230, 0.5);"></canvas>

</body>

</html>