初探HTML5——canvas元素(五)

WEB前端 97 2017-11-09 10:40

嗨,亲爱的小伙伴们!我回来啦!今天将一起继续玩转canvas,今天的小技能就厉害了,可以让canvas中的图形动起来。特别声明,我不生产代码,只是代码的搬运工。以下代码来自油管,因为感觉蛮好玩的就分享出来,仅做学习记录。

一、编写HTML页面

这一步操作很简单,就不过多赘述了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas演示</title>
    <script defer type="text/javascript" src="canvas.js"></script>
    <style type="text/css">
        canvas{
            border: solid 1px;
        }
    </style>
</head>
<body>
   <canvas></canvas>
</body>
</html>

二、烧脑核心代码

canvas.js文件中,编写了如下代码。其实整个过程不是很复杂,获取canvas上下文对象,各位已经熟悉了。接下来就是对圆形的绘制操作,前面的小节也有讲过。没有涉及的就是requestAnimationFrame()函数,这是浏览器厂商们提供的一个关于动画的API

//获取元素
var canvas= document.querySelector('canvas');
//设置宽高
canvas.width=window.innerWidth-50;
canvas.height=window.innerHeight-50;

//获取上下文
var c=canvas.getContext('2d');
/**
 * 绘制圆的函数
 **/
function Circle(x,y,dx,dy,radius) {
    this.x=x;
    this.y=y;
    this.dx=dx;
    this.dy=dy;
    this.radius=radius;

    //绘制方法
    this.draw=function () {
        c.beginPath();
        c.arc(this.x,this.y,this.radius,0,Math.PI * 2,false);
        c.strokeStyle='blue';
        c.stroke();
    }

    //更新方法
    this.update=function () {
        //检测x轴边界
        if(this.x+this.radius>innerWidth || this.x-this.radius<0){
            this.dx=-this.dx;
        }
        //检测y轴边界
        if(this.y+this.radius>innerHeight||this.y-this.radius<0){
            this.dy=-this.dy;
        }

        this.x+=this.dx;
        this.y+=this.dy;
        //调用绘制函数
        this.draw();
    }
}


//声明一个数组容器
var circleArray=[];

//随机生成圆的参数
for(var i=0;i<1000;i++){
    var x=Math.random()* innerWidth;
    var y=Math.random()*innerHeight;
    var dx=(Math.random()-0.5);
    var dy=(Math.random()-0.5);
    var radius=30;
    //将一组参数添加到容器中
    circleArray.push(new Circle(x,y,dx,dy,radius));
}

//动画函数
function animate() {
    //请求帧动画
    requestAnimationFrame(animate);
    //擦除绘制
    c.clearRect(0,0,innerWidth,innerHeight);

    //遍历更新
    for(var i=0;i<circleArray.length;i++){
        circleArray[i].update();
    }
}
//调用函数
animate();

三、效果浏览

真实的效果其实是可以看到很多的圆在舞动。小伙伴们可以自己试一试。

初探HTML5——canvas元素(五)-JEESNS
静态效果图
文章评论