H5 canvas倒计时

前端开发未来前景2018|2018前端开发笔记本|动态网站开发前端

代码片段 1

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端网站开发兼职:H5倒计时</title>
    <style>
        #canvas {
            border: 1px solid black;
            background-color: skyblue;
        }
    </style>
    <script>
        window.onload = function () {
            var canvas = document.getElementById(“canvas”);
            var ctx = canvas.getContext(“2d”);
            function draw(angle) {
                ctx.save();
                ctx.translate(150, 150);
                ctx.rotate(-Math.PI / 2)
                ctx.fillStyle = “yellow”;
                ctx.beginPath();
                ctx.arc(0, 0, 100, Math.PI / 180 * angle, Math.PI * 2, false);
                ctx.lineTo(0, 0);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }
            var angle = 0;
            var count = 0;
            var per = 10;
            var timer = setInterval(function () {
                angle += 1;
                if (angle % 36 == 0) {
                    per–;
                }
                if (angle >= 360) {
                    clearInterval(timer);
                }
                ctx.clearRect(0, 0, 300, 300);
                draw(angle);
                ctx.fillText(per, 148, 154);
            }, 30)
        }
    </script>
</head>
<body>
    <canvas id=”canvas” width=”300″ height=”300″></canvas>
</body>
</html>

网站开发是前端还是后端|前端开发常逛的网站|网站前端开发收入怎样

» 本文来自:前端开发者 » 《H5 canvas倒计时》
» 本文链接地址:https://www.rokub.com/4547.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!