popup-canvas

最新推荐文章于 2022-08-08 17:32:44 发布

liugang0605

最新推荐文章于 2022-08-08 17:32:44 发布

阅读量611

点赞数 1

分类专栏： js canvas 动画文章标签： canvas js animation timer setInterva

本文链接：https://blog.csdn.net/power8988/article/details/76725375

版权

js 同时被 3 个专栏收录

113 篇文章 2 订阅

订阅专栏

动画

10 篇文章 0 订阅

订阅专栏

canvas

8 篇文章 0 订阅

订阅专栏

之前就说要写的，今天补出来；
先看效果：
这里写图片描述
基本代码：
要实现

<!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">
    此处写代码
</script>
</body>
</html>

首先需要定义一个画圆的基本样式所需要的属性；

function draw(x, y, r) {
        var canvas = document.getElementById("cv");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "#" + 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.fill()
        }
    }

这里strokeStyle指的是圆的颜色；
这里才用随机生成的方式

 ctx.fillStyle = "#" + getN(255, 0).toString(16) + getN(255, 0).toString(16) + getN(255, 0).toString(16);

其中的随机数字是：

function getN(max, min) {
        return Math.floor(Math.random() * (max - min) + min)
    }

为了判断生成了多少个圆，我定义了一个基本变量，以此控制何时清空画布；

  var z = 0;

这里还需要定义画圆的方法，

      function startDrawing() {
        var x = getN(400, 100), y = getN(x, 10), r = getN(x / 8, y / 8);
        if (z > 20) {
            document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500);
            z=0;
            startDrawing()
        } else {
            draw(x, y, r);
            draw(y, x, r);
            z++;
        }
    }

然后就可以画圆了，这里我们通过点击按钮开始画圆

    var timer=null;
    start.onclick = function () {
        clearInterval(timer);
           timer=setInterval(function () {
                startDrawing()
            }, 100)

    }

最后补上完整代码

<!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.fillStyle = "#" + 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.fill()
        }
    }
    function getN(max, min) {
        return Math.floor(Math.random() * (max - min) + min)
    }
    var z = 0;
    function startDrawing() {
        var x = getN(400, 100), y = getN(x, 10), r = getN(x / 8, y / 8);
        if (z > 20) {
            document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500);
            z=0;
            startDrawing()
        } else {
            draw(x, y, r);
            draw(y, x, r);
            z++;
        }
    }
    var timer=null;
    start.onclick = function () {
        clearInterval(timer);
           timer=setInterval(function () {
                startDrawing()
            }, 100)

    }

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

今天看了看发现因为xyr的范围问题，所以大多数都生成在右下角，所以略加改动；

function startDrawing() {
        this.create=function(){
            var x = getN(400, 50), y = getN(400, 50), r = getN(x / getN(30,5), y / getN(30,2));
            draw(x, y, r);
            z++;
        };
        if (z > 88) {
            document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500);
            z=0;
        } else {
            this.create();
            this.create();
            this.create();
        }
    }

这里增加了this.create属性，其实还可以用类的概念，不过下来再说吧；
对了之前说过的狂点按钮，生成速度加快的问题也得到解决了。

var timer=null;
    start.onclick = function () {
        clearInterval(timer);
           timer=setInterval(function () {
                startDrawing()
            }, 100)
    }

就是点击进入时首先清定时器，然后再开启定时器；
以下是第二版的完整代码：

<!doctype html>
<html>
<head>
    <style>
        canvas {
            background: yellow
        }
    </style>
    <meta charset="utf-8">
</head>
<body>
<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.fillStyle = "#" + 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.fill()
        }
    }
    function getN(max, min) {
        return Math.floor(Math.random() * (max - min) + min)
    }
    var z = 0;
    function startDrawing() {
        this.create=function(){
            var x = getN(400, 50), y = getN(400, 50), r = getN(x / getN(30,5), y / getN(30,2));
            draw(x, y, r);
            z++;
        };
        if (z > 88) {
            document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500);
            z=0;
        } else {
            this.create();
            this.create();
            this.create();
        }
    }
    var timer=null;
    start.onclick = function () {
        clearInterval(timer);
           timer=setInterval(function () {
                startDrawing()
            }, 100)
    }

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

liugang0605

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
popup-canvas

之前就说要写的，今天补出来；先看效果：基本代码：要实现<!doctype html><html><head> <style> canvas { background: yellow } </style> <meta charset="utf-8"></head><body onload="draw
复制链接

扫一扫