介绍 & lt; ! doctype html>
,& lt; html>
,& lt; head>
,& lt; meta charset=皍tf-8"比;
,& lt; title> & lt;/title>
,& lt;/head>
,& lt; body>
,& lt; canvas id=癱anvas"祝辞& lt;/canvas>
,& lt; script>
,var canvas =, . getelementbyid(& # 39;帆布# 39;),=,,ctx canvas.getContext (& # 39; 2 d # 39;),=,,canvasW canvas.width =, window.innerWidth,=,,canvasH canvas.height =, window.innerHeight,=,,canvasWHalf canvasW /, 2,=,,canvasHHalf canvasH /, 2,=,,xoff canvasWHalf 作用;306年,=,yoff 50,=,bg & # 39; 00061一个# 39;=,id 0,=,raindrops [],
,minSize =, 1,=,maxSize 4,=,minSpeed 5,=,maxSpeed 20日=,minHue 0,
360年,maxHue =,,=,maxAmount 50;
,function 随机(最小值,最大值),{
,if (arguments.length & lt;, 2), {
max 才能=,最小值;
时间=min 才能;0;
,}
,return Math.floor (math . random (), *, (max 安康;分钟),+,min);
,}
,function hexToRGB(十六进制,不透明度),{
,var rgb =, & # 39; & # 39;;
,hex.match (/{2}/g) .forEach(函数(n), {
rgb 才能+=,(方法(n, 16)), +, & # 39; & # 39;;
,});
,return & # 39; rgba (& # 39;, +, rgb +, opacity +, & # 39;) & # 39;;
,}
,function 画(),{
,//心=,,ctx.fillStyle hexToRGB (bg, & # 39; 0.1 & # 39;);
,ctx.beginPath ();
,//Left 一半
,ctx.moveTo (0, 0);
,ctx.lineTo (canvasWHalf, 0);
,ctx.lineTo(304, +,发送葡开,,,97 +,yoff);
,ctx.bezierCurveTo(282, +,发送葡开,,,5 +,yoff,, 80, +,发送葡开,,6,+,yoff,, 76, +,发送葡开,,,165 +,yoff);
,ctx.bezierCurveTo(74, +,发送葡开,,,251 +,yoff,, 184, +,发送葡开,,,300 +,yoff,, 304, +,发送葡开,,,447 +,yoff);
,ctx.lineTo (canvasWHalf, canvasH);
,ctx.lineTo (0,, canvasH);
,//Right 一半
,ctx.moveTo (canvasW, 0);
,ctx.lineTo (canvasWHalf, 0);
,ctx.lineTo(304, +,发送葡开,,,97 +,yoff);
,ctx.bezierCurveTo(326, +,发送葡开,,,5 +,yoff,, 528, +,发送葡开,,6,+,yoff,, 532, +,发送葡开,,,165 +,yoff);
,ctx.bezierCurveTo(534, +,发送葡开,,,251 +,yoff,, 424, +,发送葡开,,,300 +,yoff,, 304, +,发送葡开,,,447 +,yoff);
,ctx.lineTo (canvasWHalf, canvasH);
,ctx.lineTo (canvasW, canvasH);
,ctx.closePath ();
,ctx.fill ();//,雨滴
,for (var 小姐:=,1;,小姐:& lt;, id;,我+ +),{
雨滴才能[我].fall ();
,};
,}
,var Raindrop =,()函数,{
,身份证+ +;=,this.y 随机(-canvasH);=,this.x 随机(canvasW);=,this.size 随机(minSize,最大尺寸);=,this.speed 随机(minSpeed, maxSpeed);=,this.color & # 39;高速逻辑(& # 39;,+,随机(minHue, maxHue), +, & # 39;, 100%, 55%) & # 39;;=,,this.origColor this.color;=,this.id id;
,雨滴(id)=,;
,};=,Raindrop.prototype.fall 函数(),{
+=,this.y this.speed;
,if (this.y 祝辞=,canvasH), {
时间=this.y 才能;随机(-canvasH);
时间=this.x 才能;随机(canvasW);
,}
,ctx.save ();
,ctx.beginPath ();
,var gradient =, ctx.createRadialGradient (this.x, this.y,, 0,, this.x,, this.y,, size);
,gradient.addColorStop (0, & # 39; # fff& # 39;);
,gradient.addColorStop (0.5,, this.color);
,gradient.addColorStop (1, hexToRGB (bg, 0));
,ctx.rect (this.x, this.y,, size,, maxSpeed);=,ctx.fillStyle 梯度;
,ctx.fill ();
,ctx.closePath ();
,ctx.restore ();
,};
,(function init (), {=,ctx.fillStyle & # 39; # & # 39;, +, bg;
,ctx.fillRect (0, 0, canvasW,, canvasH);
,for (var 小姐:=,0;,小姐:& lt;, maxAmount;,我+ +),{
new 才能,雨滴();
,}
,}());
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍帆布怎么实现爱心和彩虹雨效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<>强效果图:
<强>代码如下:
