Canvas制做的下雨动漫的示例

日期:2021-02-23 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

简介

在codepen上看到1个Canvas做的下雨实际效果动漫,觉得蛮成心思的。就科学研究了下,这里来共享下,完成技能。

实际效果截图:

Canvas动漫基本

大伙儿都了解,Canvas实际上只是1个画板。大家能够运用canvas的api在上面绘图各种各样图型。

Canvas 2D 的API:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

那末Canvas绘图动漫的流程便是:

  1. 绘图第1帧图型(运用API制图)
  2. 清空画板(运用clearRect()或fillRect())
  3. 绘图下1帧动漫

用甚么来操纵动漫每帧的绘图時间呢?大伙儿很非常容易想起 window.setInterval()和window.setTimeout()。没错用这两个还可以。除此以外,后来又出現1个新的方式:window.requestAnimationFrame(callback)。

requestAnimationFrame会告知访问器你要绘图1个动漫。让访问器要重绘时启用你特定的方式(callback)来绘图你的动漫。

应用方式以下:

function anim() {
    ctx.fillStyle = clearColor;
    ctx.fillRect(0,0,w,h);
    for(var i in drops){
        drops[i].draw();
    }
    requestAnimationFrame(anim);
}

1般状况下优先选择应用requestAnimationFrame能维持动漫绘图的频率和访问赏识绘的频率1致。悲剧的是requestAnimationFrame的适配性还并不是很好。IE9下列和addroid 4.3下列仿佛不适用这个特性。不适用的访问器要用setInterval或setTimeout做适配。

雨滴着落实际效果

最先来说讲雨滴着落的实际效果怎样制做。雨滴实际上是1个长方形,随后加残影。残影的绘图能够说是雨滴着落的重要。残影是根据在前行的方位每帧都绘图1个半全透明的情况和1个长方形,随后前面绘图的图型叠加造成的实际效果。因为前行方位的图型最终绘图,因此显得光亮,后边的图型叠加的较为多,因此视觉效果上变弱。总体看起来后边的就像残影。这里绘图具备全透明度情况是重要,不然造成不上叠加实际效果。

那末来绘图个雨滴看看。最先提前准备1个画板:

html编码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>霓虹雨</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
        .bg {
            background: #000;
            overflow: hidden;
        }
    </style>

</head>
<body class="bg">
<canvas id="canvas-club"></canvas>
<script type="text/javascript" src="raindrop.js"></script>
</body>
</html>

我在js文档里绘图动漫(raindrop.js),编码以下:

var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获得canvas左右文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设定canvas宽、高
var clearColor = 'rgba(0, 0, 0, .1)';//画板情况,留意最终的全透明度0.1 这是造成叠加实际效果的基本

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

function RainDrop(){}
//雨滴目标 这是绘图雨滴动漫的重要
RainDrop.prototype = {
    init:function(){
        this.x =  random(0, w);//雨滴的部位x
        this.y = 0;//雨滴的部位y
        this.color = 'hsl(180, 100%, 50%)';//雨滴色调 长方形的填充色
        this.vy = random(4, 5);//雨滴着落速率
        this.hit = random(h * .8, h * .9);//着落的最大值
        this.size = 2;//长方形宽度
    },
    draw:function(){
        if (this.y < this.hit) {
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.size, this.size * 5);//绘图长方形,根据数次叠加长方形,产生雨滴着落实际效果
        }
        this.update();//升级部位
    },
    update:function(){
        if(this.y < this.hit){
            this.y += this.vy;//未做到底部,提升雨滴y座标
        }else{
            this.init();
        }
    }
};

function resize(){
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
}

//原始化1个雨滴
var r = new RainDrop();
r.init();

function anim() {
    ctx.fillStyle = clearColor;//每帧都填充情况色
    ctx.fillRect(0,0,w,h);//填充情况色,留意不必用clearRect,不然会清空前面的雨滴,致使不可以造成叠加的实际效果
    r.draw();//绘图雨滴
    requestAnimationFrame(anim);//操纵动漫帧
}

window.addEventListener("resize", resize);
//起动动漫
anim();

涟漪实际效果

接着来绘图涟漪实际效果。与绘图雨滴的方法相近,也是根据具备全透明度的情况来叠加前面的图象造成内黑影的实际效果。

编码以下(rippling.js):

var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获得canvas左右文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设定canvas宽、高
var clearColor = 'rgba(0, 0, 0, .1)';//画板情况,留意最终的全透明度0.1 这是造成叠加实际效果的基本

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

function Rippling(){}
//涟漪目标 这是涟漪动漫的关键一部分
Rippling.prototype = {
    init:function(){
        this.x = random(0,w);//涟漪x座标
        this.y = random(h * .8, h * .9);//涟漪y座标
        this.w = 2;//椭圆型涟漪宽
        this.h = 1;//椭圆涟漪高
        this.vw = 3;//宽度提高速率
        this.vh = 1;//高宽比提高速率
        this.a = 1;//全透明度
        this.va = .96;//涟漪消退的渐变色速率
    },
    draw:function(){
        ctx.beginPath();
        ctx.moveTo(this.x, this.y - this.h / 2);
        //绘图右弧线
        ctx.bezierCurveTo(
            this.x + this.w / 2, this.y - this.h / 2,
            this.x + this.w / 2, this.y + this.h / 2,
            this.x, this.y + this.h / 2);
        //绘图左弧线
        ctx.bezierCurveTo(
            this.x - this.w / 2, this.y + this.h / 2,
            this.x - this.w / 2, this.y - this.h / 2,
            this.x, this.y - this.h / 2);
        
        ctx.strokeStyle = 'hsla(180, 100%, 50%, '+this.a+')';
        ctx.stroke();
        ctx.closePath();
        this.update();//升级座标
    },
    update:function(){
        if(this.a > .03){
            this.w += this.vw;//宽度提高
            this.h += this.vh;//高宽比提高
            if(this.w > 100){
                this.a *= this.va;//当宽度超出100,涟漪慢慢变淡消退
                this.vw *= .98;//宽度提高变迟缓
                this.vh *= .98;//高宽比提高变迟缓
            }
        } else {
            this.init();
        }

    }
};

function resize(){
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
}

//原始化1个涟漪
var r = new Rippling();
r.init();

function anim() {
    ctx.fillStyle = clearColor;
    ctx.fillRect(0,0,w,h);
    r.draw();
    requestAnimationFrame(anim);
}

window.addEventListener("resize", resize);
//起动动漫
anim();

总结

这样大伙儿对全部下雨实际效果的制做方式,应当有1定的掌握了。Canvas用来绘图动漫的实际效果的确能令人眼下1亮,让web的视觉效果实际效果提高1大截。启动自身的聪慧,坚信能做出更多奇特的动漫。这是我愈来愈喜爱web的缘故之1吧 O(∩_∩)O~~。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。