canvas画圆

最新推荐文章于 2024-01-01 16:24:53 发布

原创最新推荐文章于 2024-01-01 16:24:53 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

js 同时被 2 个专栏收录

113 篇文章

订阅专栏

canvas

8 篇文章

订阅专栏

用canvas简单写几个同心圆吧；
代码如下：

<!doctype html>
<html>
<head>
    <style>
        canvas {
            background: yellow
        }
    </style>
    <meta charset="utf-8">
</head>
<body onload="draw()">
<canvas id="cv" width="500" height="500">
</canvas>
<button id="start">开始</button>
<script type="text/javascript">
    function draw(x, y, r) {
        var canvas = document.getElementById("cv");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#" + getN(255, 0).toString(16) + getN(255, 0).toString(16) + getN(255, 0).toString(16);
            ctx.strokeWidth=2;
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI, false);
            ctx.stroke()
        }
    }
    function getN(max, min) {
        return Math.floor(Math.random() * (max - min) + min)
    }
    function startDrawing() {
        var i = 10, dir = 0.1;
        var timer = setInterval(function () {
            if (i > 150) {
                timer = null;
            } else {
                i += 5;
                dir =1;
                draw(250, 250, i * dir);
            }
        }, 100);
    }
 start.onclick=function(){
     setInterval(function(){
         startDrawing()
     },2000)
 }

</script>
</body>
</html>