使用 canvas 画圆

来源：互联网发布：centos smplayer 编辑：程序博客网时间：2024/05/17 23:46

使用原生的 HTML5 和 JS ，在屏幕中动态生成随机的 50 个小圆：

arc()画圆弧的方法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟位置是0度），结束角，规定应该是顺时针还是逆时针画图)

其中最后一个参数是可选的，true=逆时针，false =顺时针

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Random canvas circles</title>    <style>        html {            width: 100%;            height: inherit;            background: #ddd;        }        body {            margin: 0;        }        canvas {            display: block;        }        button {            position: absolute;            top: 5px;            left: 5px;        }    </style></head><body>    <button>Update</button>    <canvas></canvas>    <script>        var btn = document.querySelector("button");        var canvas = document.querySelector("canvas");        var ctx = canvas.getContext("2d");        var WIDTH = document.documentElement.clientWidth;        var HEIGHT = document.documentElement.clientHeight;        canvas.width = WIDTH;        canvas.height = HEIGHT;        function random (num) {            return Math.floor(Math.random()*num);        }        function draw () {            ctx.clearRect(0, 0, WIDTH, HEIGHT);            for (var i = 0; i < 100; i++) {                ctx.beginPath();                ctx.fillStyle = "rgba(255,0,0,0.5)";                ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2*Math.PI);                ctx.fill();            }        }        btn.addEventListener("click", draw);        var intervalId;        var count = 0;        intervalId = setInterval(function () {            if (count === 20) {                clearInterval(intervalId);                count = 0;                return;            }            draw();            count++;        }, 100);    </script></body></html>

阅读全文

'); })();