Home >Web Front-end >H5 Tutorial >Canvas achieves the effects of love and rainbow rain

Canvas achieves the effects of love and rainbow rain

不言Original: 2018-07-03 11:28:483483browse

This article mainly introduces examples of canvas to achieve love and rainbow rain effects, which has a good reference value. Let’s take a look at it

Rendering:

##The code is as follows:

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <canvas id="canvas"></canvas>
 <script>
 var canvas = document.getElementById(&#39;canvas&#39;),
 ctx = canvas.getContext(&#39;2d&#39;),
 canvasW = canvas.width = window.innerWidth,
 canvasH = canvas.height = window.innerHeight,
 canvasWHalf = canvasW / 2,
 canvasHHalf = canvasH / 2,
 xoff = canvasWHalf - 306,
 yoff = 50,
 bg = &#39;00061a&#39;,
 id = 0,
 raindrops = [],
 minSize = 1,
 maxSize = 4,
 minSpeed = 5,
 maxSpeed = 20,
 minHue = 0,
 maxHue = 360,
 maxAmount = 50;
 function random(min, max) {
 if (arguments.length < 2) {
  max = min;
  min = 0;
 }
 return Math.floor(Math.random() * (max - min) + min);
 }
 function hexToRGB(hex, opacity) {
 var rgb = &#39;&#39;;
 hex.match(/.{2}/g).forEach(function(n) {
  rgb += (parseInt(n, 16)) + &#39;,&#39;;
 });
 return &#39;rgba(&#39; + rgb + opacity + &#39;)&#39;;
 }
 function draw() {
 // Heart
 ctx.fillStyle = hexToRGB(bg, &#39;0.1&#39;);
 ctx.beginPath();
 // Left half
 ctx.moveTo(0, 0);
 ctx.lineTo(canvasWHalf, 0);
 ctx.lineTo(304 + xoff, 97 + yoff);
 ctx.bezierCurveTo(282 + xoff, -5 + yoff, 80 + xoff, -6 + yoff, 76 + xoff, 165 + yoff);
 ctx.bezierCurveTo(74 + xoff, 251 + yoff, 184 + xoff, 300 + yoff, 304 + xoff, 447 + yoff);
 ctx.lineTo(canvasWHalf, canvasH);
 ctx.lineTo(0, canvasH);
 // Right half
 ctx.moveTo(canvasW, 0);
 ctx.lineTo(canvasWHalf, 0);
 ctx.lineTo(304 + xoff, 97 + yoff);
 ctx.bezierCurveTo(326 + xoff, 5 + yoff, 528 + xoff, 6 + yoff, 532 + xoff, 165 + yoff);
 ctx.bezierCurveTo(534 + xoff, 251 + yoff, 424 + xoff, 300 + yoff, 304 + xoff, 447 + yoff);
 ctx.lineTo(canvasWHalf, canvasH);
 ctx.lineTo(canvasW, canvasH);
 ctx.closePath();
 ctx.fill();
 // Raindrops
 for (var i = 1; i < id; i++) {
  raindrops[i].fall();
 };
 }
 var Raindrop = function() {
 id++;
 this.y = random(-canvasH);
 this.x = random(canvasW);
 this.size = random(minSize, maxSize);
 this.speed = random(minSpeed, maxSpeed);
 this.color = &#39;hsl(&#39; + random(minHue, maxHue) + &#39;,100%,55%)&#39;;
 this.origColor = this.color;
 this.id = id;
 raindrops[id] = this;
 };
 Raindrop.prototype.fall = function() {
 this.y += this.speed;
 if (this.y >= canvasH) {
  this.y = random(-canvasH);
  this.x = random(canvasW);
 }
 ctx.save();
 ctx.beginPath();
 var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.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, this.size, maxSpeed);
 ctx.fillStyle = gradient;
 ctx.fill();
 ctx.closePath();
 ctx.restore();
 };
 (function init() {
 ctx.fillStyle = &#39;#&#39; + bg;
 ctx.fillRect(0, 0, canvasW, canvasH);
 for (var i = 0; i < maxAmount; i++) {
  new Raindrop();
 }
 }());
 function animate() {
 draw();
 window.requestAnimationFrame(animate);
 }
 window.requestAnimationFrame(animate);
 function mouseTrail(x, y) {
 ctx.save();
 ctx.globalCompositeOperation = &#39;overlay&#39;;
 ctx.fillStyle = &#39;rgba(255,255,255,0.1)&#39;;
 ctx.arc(x, y, 50, 0, Math.PI * 2);
 ctx.fill();
 ctx.restore();
 }
 window.addEventListener(&#39;mousemove&#39;, function(cursor) {
 mouseTrail(cursor.x, cursor.y);
 });
 </script>
 </body>
</html>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement element image mirror flip animation effect on canvas

HTML5 canvas draws five-pointed star Methods

The above is the detailed content of Canvas achieves the effects of love and rainbow rain. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 address book obtains information of specified multiple peopleNext article：HTML5 address book obtains information of specified multiple people

See more

Canvas achieves the effects of love and rainbow rain

Related articles