canvas海藻类

最新推荐文章于 2024-10-30 18:24:25 发布

daily886

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量239

点赞数

分类专栏： js html 文章标签： canvas javascript

本文链接：https://blog.csdn.net/daily886/article/details/78684729

版权

js 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas海藻类</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#canvas{
position:relative;
margin:50px auto;
}
</style>
</head>
<body>
<div id="canvas" style="width:500px;height:500px;"></div>
</body>
</html>
<script>
var jquery = (function(){ //模拟jquery的$函数
var $ = function(id){
return document.getElementById(id) || id;
}
return $;
}());

var algae = (function($){
var set = 0; //步进值，因为动画使用的是requestAnimation，循环时间是1000/60 ms ,所以使用步进值来控制速度
var extend = function(target,source){ //继承option
for(key in source){
if(key in target){
target[key] = source[key];
}
}
return target;
}

var addEvent = function(obj,event,func){ //绑定事件
obj.addEventListener ? obj.addEventListener(event,func,false) : obj.attachEvent("on"+event,function(){func.call(obj);});
}

window.requestAnimation = function(){ //设置兼容动画函数
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(fn){
window.setTimeout(fn,1000/60);
};
}();

var init = function(opt){
this.option = {
element : null,
bgColor : "#5A92AF",
algaeColor : "#3b154e",
algaenum : 50, //海藻数量
algaewidth : 15, //海藻的宽度
algaeminheight : 80, //海藻的最小高度
algaemaxheight : 130, //海藻的最大高度
bend : 10, //海藻的弯曲度， 0-100，越大越直
speed : 3, //速度，1开始，越小越快
range : 5, //摇摆的幅度，1开始
random : 1, //摇摆幅度随机，1是，0不是，随机后，摇摆幅度设置无效
randomMinRange : 10, //随机摇摆的最小幅度
randomMaxRange : 30, //随机摇摆的最大幅度
}
this.algae = [];
this.algaey = [];
this.swing = 1; //1是摆向左边；
extend(this.option,opt);
this.initialize();
}

init.prototype = {
initialize : function(){
this.canvas = this.createCanvas();
this.ctx = this.canvas.getContext("2d");

for(var i = 0;i < this.option.algaenum;i++){
//随机生成海藻的坐标x ,和quadraticCurveTo的坐标y
//坐标x要来生成海藻位置， quadraticCurveTo的坐标y 要来生成海藻高度
this.algae.push(Math.random()*this.canvas.width);
this.algaey.push((this.canvas.height-this.option.algaeminheight)-(Math.random()*(this.option.algaemaxheight-this.option.algaeminheight)));
}
this.loopLine(0,this.option.range);
},
loopLine : function(rx,rnum){
var _this = this;
if(set % this.option.speed == 0){ //判断步进值与速度的求模
_this.randomLine(rx); //生成海藻
if(this.swing == 1){ //摆向左边
rx ++;
}else{ //摆向右边
rx --;
}

}
if(this.option.range <= 0){return;} //0就停止循环，防止死循环
set++; //步进值++
if(rx > rnum){
if(this.option.random == 1 && this.swing != 0){
rnum = Math.floor(Math.random()*(this.option.randomMaxRange-this.option.randomMinRange))+this.option.randomMinRange; //随机生成的摇摆幅度
}
this.swing = 0;//摆向右边
}else if(rx < -rnum){
if(this.option.random == 1 && this.swing != 1){
rnum = Math.floor(Math.random()*(this.option.randomMaxRange-this.option.randomMinRange))+this.option.randomMinRange; //随机生成的摇摆幅度
}
this.swing = 1;//摆向左边
}

window.requestAnimation(function(){_this.loopLine(rx,rnum);}); //使用requestAnimation循环动画

},
randomLine : function(rx){ //画随机海藻
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); //每次画之前，清除canvas
this.ctx.save();
this.ctx.fillStyle = this.option.bgColor;
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height); //画背景
this.ctx.restore();

for(var i = 0,leng = this.algae.length;i < leng;i++){ //生成海藻
sx = this.algae[i];
aheight = this.algaey[i];
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineCap = "round";
this.ctx.strokeStyle = this.option.algaeColor; //颜色
this.ctx.globalAlpha = 0.8; //透明度
this.ctx.lineWidth = this.option.algaewidth; //宽度
this.ctx.moveTo(sx,this.canvas.height); //起始坐标
this.ctx.quadraticCurveTo(sx,aheight+this.option.bend,sx+rx,aheight) //参数：中点坐标x,中点坐标y,终点坐标x,终点坐标y
this.ctx.stroke();
this.ctx.restore();
}
},
createCanvas : function(){
var canvas = document.createElement("CANVAS");
canvas.innerHTML = "您的浏览器不支持canvas,赶紧换一个吧!";
$(this.option.element).appendChild(canvas);
canvas.width = parseInt($(this.option.element).style.width);
canvas.height = parseInt($(this.option.element).style.height);
return canvas;
}
}
return init;
}(jquery || {}))

window.onload = function(){
var option = { //初始化参数
element : "canvas", //canvas的父元素Id
bgColor : "#5A92AF", //背景颜色
algaeColor : "#3b154e", //海藻颜色
algaenum : 50, //海藻数量
algaewidth : 15, //海藻的宽度
algaeminheight : 80, //海藻的最小高度
algaemaxheight : 130, //海藻的最大高度
bend : 10, //海藻的弯曲度， 0-100，越大越直
speed : 3, //速度，1开始，越小越快
range : 20, //摇摆幅度，1开始
random : 1, //摇摆幅度随机，1是，0不是，随机后，摇摆幅度设置无效
randomMinRange : 10, //随机摇摆的最小幅度
randomMaxRange : 30 //随机摇摆的最大幅度
}
new algae(option); //初始化海藻类
}
</script>