JS+Canvas는 비와 눈 효과를 구현합니다.-JS 튜토리얼-php.cn

최근 비와 가벼운 눈의 애니메이션 효과를 구현해야 하는 프로젝트를 진행했는데, 캔버스에 일반적인 떨어지는 물체 효과를 보여주기 위해 여기에 드롭 구성요소를 만들었습니다. 텍스트를 소개하기 전에 렌더링을 보여드리겠습니다:

렌더링을 보여주세요:

비와 눈이 옵니다

JS+Canvas 实现下雨下雪效果

생성된 DOM 요소를 사용하여 다중 객체 포지셔닝 애니메이션을 만드는 것과 비교하면 캔버스를 사용하는 것이 더 쉽고 빠르며 성능도 더 좋을 것 같습니다

코드 호출

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#canvas{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="canvasDrop.js"></script>
<script>
canvasDrop.init({
type: "rain", // drop类型，有rain or snow
speed : [0.4,2.5], //速度范围
size_range: [0.5,1.5],//大小半径范围
hasBounce: true, //是否有反弹效果or false,
wind_direction: -105 //角度
hasGravity: true //是否有重力考虑
});
</script>
</body>
</html>

로그인 후 복사

그럼 먼저 간단한 구현 원리부터 설명하겠습니다. 먼저 풍향 각도, 확률, 객체 데이터 등 우리가 사용할 전역 변수를 정의합니다.

전역 변수 정의

//定义两个对象数据
//分别是drops下落物体对象
//和反弹物体bounces对象
var drops = [], bounces = [];
//这里设定重力加速度为0.2/一帧
var gravity = 0.2;
var speed_x_x, //横向加速度
speed_x_y, //纵向加速度
wind_anger; //风向
//画布的像素宽高
var canvasWidth,
canvasHeight;
//创建drop的几率
var drop_chance;
//配置对象
var OPTS;
//判断是否有requestAnimationFrame方法，如果有则使用，没有则大约一秒30帧
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 30);
};

로그인 후 복사

핵심 개체 정의

다음으로 몇 가지 중요한 개체를 정의해야 합니다. 조직에서는 상대적으로 적은 수의 개체를 정의해야 합니다. 전체 드롭 구성 요소에는 다음과 같은 세 가지 핵심 개체만 정의됩니다. :

가로 x와 세로 y를 갖는 벡터 속도 객체, 속도 단위는 V = 변위 픽셀/프레임

벡터 객체에 대한 이해도 매우 간단하고 조잡합니다. 떨어지는 물체의 낙하 속도/V를 기록하려면

var Vector = function(x, y) {
//私有属性 横向速度x ,纵向速度y
this.x = x || 0;
this.y = y || 0;
};
//公有方法- add : 速度改变函数,根据参数对速度进行增加
//由于业务需求，考虑的都是下落加速的情况，故没有减速的，后期可拓展
/*
* @param v object || string 
*/
Vector.prototype.add = function(v) {
if (v.x != null && v.y != null) {
this.x += v.x;
this.y += v.y;
} else {
this.x += v;
this.y += v;
}
return this;
};
//公有方法- copy : 复制一个vector，来用作保存之前速度节点的记录
Vector.prototype.copy = function() {
//返回一个同等速度属性的Vector实例
return new Vector(this.x, this.y);
};
Drop 下落物体对象， 即上面效果中的雨滴和雪， 在后面你也可自己拓展为陨石或者炮弹
对于Drop对象其基本定义如下
//构造函数
var Drop = function() {
/* .... */
};
//公有方法-update 
Drop.prototype.update = function() {
/* .... */
};
//公有方法-draw
Drop.prototype.draw = function() {
/* .... */
};

로그인 후 복사

위의 세 가지 방법을 읽은 후 해당 기능을 추측하셨나요? 다음으로 이 세 가지 방법의 기능을 이해해 보겠습니다.

Constructor

생성자는 속도, 초기 좌표, 크기, 가속도 등 Drop 개체의 초기 정보를 정의하는 역할을 주로 담당합니다.

//构造函数 Drop
var Drop = function() {
//随机设置drop的初始坐标 
//首先随机选择下落对象是从从哪一边
var randomEdge = Math.random()*2;
if(randomEdge > 1){
this.pos = new Vector(50 + Math.random() * canvas.width, -80);
}else{
this.pos = new Vector(canvas.width, Math.random() * canvas.height);
}
//设置下落元素的大小
//通过调用的OPTS函数的半径范围进行随机取值
this.radius = (OPTS.size_range[0] + Math.random() * OPTS.size_range[1]) *DPR;
//获得drop初始速度
//通过调用的OPTS函数的速度范围进行随机取值
this.speed = (OPTS.speed[0] + Math.random() * OPTS.speed[1]) *DPR;
this.prev = this.pos;
//将角度乘以 0.017453293 （2PI/360）即可转换为弧度。
var eachAnger = 0.017453293; 
//获得风向的角度
wind_anger = OPTS.wind_direction * eachAnger;
//获得横向加速度 
speed_x = this.speed * Math.cos(wind_anger);
//获得纵向加速度
speed_y = - this.speed * Math.sin(wind_anger);
//绑定一个速度实例
this.vel = new Vector(wind_x, wind_y);
};

로그인 후 복사

Drop 개체의 업데이트 방법

업데이트 메소드는 각 프레임을 담당합니다. 변위 변경과 같은 드롭 인스턴스의 속성 변경

Drop.prototype.update = function() {
this.prev = this.pos.copy();
//如果是有重力的情况，则纵向速度进行增加
if (OPTS.hasGravity) {
this.vel.y += gravity;
}
//
this.pos.add(this.vel);
};

로그인 후 복사

드롭 객체의 그리기 메소드

드로우 메소드가 그리기를 담당합니다. 각 프레임에 인스턴스를 떨어뜨리세요

Drop.prototype.draw = function() {
ctx.beginPath();
ctx.moveTo(this.pos.x, this.pos.y);
//目前只分为两种情况，一种是rain 即贝塞尔曲线
if(OPTS.type =="rain"){
ctx.moveTo(this.prev.x, this.prev.y);
var ax = Math.abs(this.radius * Math.cos(wind_anger));
var ay = Math.abs(this.radius * Math.sin(wind_anger));
ctx.bezierCurveTo(this.pos.x + ax, this.pos.y + ay, this.prev.x + ax , this.prev.y + ay, this.pos.x, this.pos.y);
ctx.stroke();
//另一种是snow--即圆形
}else{
ctx.moveTo(this.pos.x, this.pos.y);
ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI*2);
ctx.fill();
}
};

로그인 후 복사

bounce 땅에 떨어졌을 때 튀는 물체, 즉 위의 빗물에 튀는 물방울 당신. 나중에 리바운드 자갈이나 연기로 확장할 수도 있습니다

정의는 매우 간단합니다. 여기서는 자세한 설명이 없습니다.

var Bounce = function(x, y) {
var dist = Math.random() * 7;
var angle = Math.PI + Math.random() * Math.PI;
this.pos = new Vector(x, y);
this.radius = 0.2+ Math.random()*0.8;
this.vel = new Vector(
Math.cos(angle) * dist,
Math.sin(angle) * dist
);
};
Bounce.prototype.update = function() {
this.vel.y += gravity;
this.vel.x *= 0.95;
this.vel.y *= 0.95;
this.pos.add(this.vel);
};
Bounce.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, this.radius*DPR, 0, Math.PI * 2);
ctx.fill();
};

로그인 후 복사

외부 인터페이스

update

는 전체 캔버스 애니메이션의 시작 기능인

function update() {
var d = new Date;
//清理画图
ctx.clearRect(0, 0, canvas.width, canvas.height);
var i = drops.length;
while (i--) {
var drop = drops[i];
drop.update();
//如果drop实例下降到底部，则需要在drops数组中清楚该实例对象
if (drop.pos.y >= canvas.height) {
//如果需要回弹，则在bouncess数组中加入bounce实例
if(OPTS.hasBounce){
var n = Math.round(4 + Math.random() * 4);
while (n--)
bounces.push(new Bounce(drop.pos.x, canvas.height));
}
//如果drop实例下降到底部，则需要在drops数组中清楚该实例对象
drops.splice(i, 1);
}
drop.draw();
}
//如果需要回弹
if(OPTS.hasBounce){
var i = bounces.length;
while (i--) {
var bounce = bounces[i];
bounce.update();
bounce.draw();
if (bounce.pos.y > canvas.height) bounces.splice(i, 1);
}
}
//每次产生的数量
if(drops.length < OPTS.maxNum){
if (Math.random() < drop_chance) {
var i = 0,
len = OPTS.numLevel;
for(; i<len; i++){
drops.push(new Drop());
}
}
}
//不断循环update
requestAnimFrame(update);
}

로그인 후 복사

init

에 해당합니다. init 인터페이스는 화면의 픽셀 비율 획득, 캔버스의 픽셀 크기 설정, 스타일 설정 등 캔버스 전체의 기본 속성을 모두 초기화합니다

function init(opts) {
OPTS = opts;
canvas = document.getElementById(opts.id);
ctx = canvas.getContext("2d");
////兼容高清屏幕，canvas画布像素也要相应改变
DPR = window.devicePixelRatio;
//canvas画板像素大小， 需兼容高清屏幕，故画板canvas长宽应该乘于DPR
canvasWidth = canvas.clientWidth * DPR;
canvasHeight =canvas.clientHeight * DPR;
//设置画板宽高
canvas.width = canvasWidth;
canvas.height = canvasHeight;
drop_chance = 0.4;
//设置样式
setStyle();
}
function setStyle(){
if(OPTS.type =="rain"){
ctx.lineWidth = 1 * DPR;
ctx.strokeStyle = &#39;rgba(223,223,223,0.6)&#39;;
ctx.fillStyle = &#39;rgba(223,223,223,0.6)&#39;;
}else{
ctx.lineWidth = 2 * DPR;
ctx.strokeStyle = &#39;rgba(254,254,254,0.8)&#39;;
ctx.fillStyle = &#39;rgba(254,254,254,0.8)&#39;;
}
}

로그인 후 복사

결론

그래요, 간단한 드롭 컴포넌트는 완성되었지만, 물론 부족한 곳도 많습니다. 완벽해요, 이 드롭 컴포넌트를 작성하고 나니 탐험할 곳이 많을 것 같아요. 캔버스의 애니메이션 구현을 위한 H5 장면.

마지막으로 단점과 후속 작업에 대해 이야기해 보겠습니다.

0. 이 구성 요소는 현재 외부 인터페이스가 충분하지 않고 조정 가능한 범위가 그리 크지 않으며 추상화도 다음과 같습니다. 그다지 철저하지 않음

1. setStyle은 기본 스타일을 설정합니다.

2. Drop 및 Bounce 개체의 업데이트 및 그리기 방법을 사용자 정의하여 사용자가 더 많은 낙하 속도를 설정할 수 있도록 합니다. 및 크기 변경 양식 및 스타일 효과

3. 애니메이션 일시 정지, 가속 및 감속 작업을 위한 인터페이스가 추가되어야 합니다

위는 편집기에서 소개한 JS 및 Canvas 구현입니다. 비와 눈의 영향에 대한 지식이 도움이 되기를 바랍니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

비와 눈 효과를 얻기 위한 JS+Canvas 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!