Canvas如何實作下雨動畫實例分享-js教程-PHP中文網

首頁

web前端

js教程

Canvas如何實作下雨動畫實例分享

小云云

Mar 09, 2018 am 10:49 AM

canvas下雨動畫

在codepen上看到一個Canvas做的下雨效果動畫，感覺蠻有意思的。就研究了下，這裡來分享下，實現技巧。

效果截圖：

#Canvas動畫基礎

大家都知道，Canvas其實只是一個畫板。我們可以應用canvas的api在上面繪製各種圖形。

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

那麼Canvas繪製動畫的步驟就是：

繪製第一幀圖形（利用API繪圖）
清空畫板(應用程式clearRect()或fillRect())
#繪製下一幀動畫

用什麼來控制動畫每一幀的繪製時間呢？大家很容易想到 window.setInterval()和window.setTimeout()。沒錯用這兩個也可以。除此之外，後來又出現一個新的方法：window.requestAnimationFrame(callback)。

requestAnimationFrame會告訴瀏覽器你要繪製一個動畫。讓瀏覽器要重繪時呼叫你指定的方法（callback）來繪製你的動畫。

使用方法如下：

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

一般情況下優先使用requestAnimationFrame能保持動畫繪製的頻率和瀏覽器重繪的頻率一致。不幸的是requestAnimationFrame的兼容性還不是很好。 IE9以下和addroid 4.3以下好像不支援這個屬性。不支援的瀏覽器要用setInterval或setTimeout做相容。

雨滴下墜效果

首先來講說雨滴下落的效果如何製作。雨滴其實是長方形，然後加殘影。殘影的繪製可以說是雨滴下落的關鍵。殘影是透過在前進的方向每一幀都繪製一個半透明的背景和一個長方形,然後前面繪製的圖形疊加產生的效果。由於前進方向的圖形最後繪製，所以顯得明亮，後面的圖形疊加的比較多，所以視覺上減弱。整體看起來後面的就像殘影。這裡繪製具有透明度背景是關鍵,否則產生不了疊加效果。

那麼來畫個雨滴看看。首先準備一個畫板:

html程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 = &#39;rgba(0, 0, 0, .1)&#39;;//画板背景,注意最后的透明度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 = &#39;hsl(180, 100%, 50%)&#39;;//雨滴颜色 长方形的填充色
        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;
}

//初始化一个雨滴
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 = &#39;rgba(0, 0, 0, .1)&#39;;//画板背景,注意最后的透明度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 = &#39;hsla(180, 100%, 50%, &#39;+this.a+&#39;)&#39;;
        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;
}

//初始化一个涟漪
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();

總結

##這樣大家對整個下雨效果的製作方法，應該要有一定的了解了。 Canvas用來繪製動畫的效果確實能讓人眼睛一亮，讓web的視覺效果提升一大截。發動自己的智慧，相信能做出更多奇妙的動畫。這也是我越來越喜歡web的原因之一 O(∩_∩)O~~。

相關推薦：

講述Canvas結合JavaScript實作圖片特效

HTML5 Canvas的互動式地鐵線路圖實作程式碼

利用Canvas處理圖片的方法

以上是Canvas如何實作下雨動畫實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Vue和Canvas：如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AM

Vue和Canvas：如何实现手写签名和手势识别功能引言：手写签名和手势识别功能在现代应用程序中越来越常见，它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架，搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能，并给出相应的代码示例。一、手写签名功能实现要实现手写签

Canvas的优势有哪些Aug 17, 2023 pm 04:52 PM

canvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍：1、Canvas提供了丰富的绘图功能，可以绘制各种形状、线条、文本、图像等；2、Canvas在浏览器中直接操作像素，因此具有很高的性能；3、Canvas是基于HTML5标准的一部分，可以在各种现代浏览器上运行等等。

如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM

如何利用Vue和Canvas创建逼真的天气动态背景引言：在现代网页设计中，动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例，你将学习如何编写Vue组件和利用Canvas绘制不同天气场景，从而实现一个独特而吸引人的背景效果。步骤一：创建Vue项目首先，我们需要创建一个Vue项目。

canvas特效有哪些Aug 18, 2023 pm 04:12 PM

canvas特效有粒子效果、线条动画、图片处理、文字动画、音频可视化、3D效果、游戏开发等。详细介绍：1、粒子效果，通过控制粒子的位置、速度和颜色等属性来实现各种效果，如烟花、雨滴、星空等；2、线条动画，通过在画布上绘制连续的线条，创建出各种动态的线条效果；3、图片处理，通过对图片进行处理，可以实现各种炫酷的效果，如图片切换、图片特效等；4、文字动画等等特性。

canvas插件有哪些Aug 17, 2023 pm 05:00 PM

canvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍：1、Fabric.js 是一个基于Canvas的开源 JavaScript 库，它提供了一些强大的功能；2、EaselJS是CreateJS库中的一个模块，它提供了一套简化了Canvas编程的API；3、Konva.js等等。

canvas引擎有哪些Aug 17, 2023 pm 05:29 PM

canvas引擎有Three.js、Pixi.js、EaselJS、Konva.js、Paper.js等。详细介绍：1、Pixi.js，提供了简单易用的API，支持精灵、纹理、滤镜等功能，同时还提供了丰富的工具和插件，方便开发者进行交互、动画和优化等操作；2、Pixi.js，提供了简单易用的API，支持精灵、纹理、滤镜等功能，还提供了丰富的工具和插件；3、EaselJS等等。

Vue和Canvas：如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PM

Vue和Canvas：如何实现图片的马赛克效果引言：随着Web技术的不断发展，越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中，常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果，为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理，使得整个图像变得模糊和抽象

canvas框架有哪些Aug 17, 2023 pm 04:42 PM

canvas框架有Fabric.js框架、Konva.js框架、EaselJS框架、Paper.js框架、Three.js框架等。详细介绍：1、Fabric.js框架，支持图形的选择、缩放、旋转、拖拽等操作，并且可以导出为图片或SVG格式；2、Konva.js框架，支持图形的层级管理、变换操作、事件监听等功能，适用于创建交互式的图形应用程序；3、EaselJS框架等等。

See all articles