canvas 带泡泡的海草动画特效

目录
文章目录隐藏
  1. 哪些浏览器支持 canvas
  2. Canvas 元素
  3. HTML 代码
  4. CSS 代码
  5. JavaScript 代码

我们先来了解一下 canvas 是个什么东东!说白了就相当于是一块幕布,我们可以在这张幕布上利用 JavaScript 来绘画图标、图画等。

canvas 是 HTML5 新增的一个组件,在以前没有 canvas 的时候,我们在网页上看的一些动画是不能够直接在上面显示的,那个时候需要 JavaScript 和 flash 进行交互一起来完成的。现在好了,有了 canvas 我们就不需要用 flash 插件了,直接利用 JavaScript 就可以完成绘制。

先来看看 HTML5canvas 对浏览器的兼容性:

哪些浏览器支持 canvas

canvas 带泡泡的海草动画特效

Canvas 元素

首先我们定义一个指定大小的矩形框在这个矩形框中我们就可以随意绘制我们想要的图形

<canvas id="test-canvas" width="300" height="200"></canvas>

由于浏览器对 HTML5 标准支持不一致,通常需要在<canvas>内部添加一些说明性 HTML 代码,如果浏览器支持 Canvas,它将忽略<canvas>内部的 HTML,如果浏览器不支持 Canvas,它将显示<canvas>内部的 HTML:

<canvas id="test-stock" width="300" height="200">
    <p>Your browser does not support the canvas element.
</p></canvas>

在使用 Canvas 前,用 canvas.getContext 来测试浏览器是否支持 Canvas:

var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
    console.log('你的浏览器支持 Canvas!');
} else {
    console.log('你的浏览器不支持 Canvas!');
}

好了,canvas 基础就介绍这么多,接着看主要实现代码。

效果图:

canvas 带泡泡的海草动画特效

HTML 代码

<canvas></canvas>

CSS 代码

canvas {
	display:block;
}

JavaScript 代码

var canvas, ctx, width, height, stems, bubbles;

stems = [];
bubbles = [];

function Bubble(x, y, radius) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.vy = -Math.random() * 5;
  this.opacity = 0.2 + Math.random() * 0.5;
  this.oldY = y;
}

Bubble.prototype.draw = function() {
  var strokeColor, fillColor;

  strokeColor = 'rgba(255, 255, 255,' + this.opacity  + ')';
  fillColor = 'rgba(255, 255, 255,' + (this.opacity / 2) + ')';

  ctx.save();
  ctx.lineWidth = 0.8;
  ctx.strokeStyle = strokeColor;
  ctx.fillStyle = fillColor;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
}

function Stem(points, color) {
  this.points = points;
  this.color = color;
}

Stem.prototype.draw = function(ctx) {
  var len, ctrlPoint, point;

  len = this.points.length - 1;
  ctrlPoint = {x: 0, y: 0};
  
  ctx.save();
  ctx.strokeStyle = this.color;
  ctx.beginPath();
  ctx.moveTo(this.points[this.points.length - 1].x, this.points[this.points.length - 1].y);
  for (var i = len; i >= 1; i--) {
    point = this.points[i];
    ctrlPoint.x = (point.x + this.points[i - 1].x) / 2;
    ctrlPoint.y = (point.y + this.points[i - 1].y) / 2;
    ctx.quadraticCurveTo(point.x, point.y, ctrlPoint.x, ctrlPoint.y);
    ctx.lineWidth = i * 1.1;
    ctx.stroke();
    ctx.fillStyle = 'red';
  }
  ctx.restore();
}

init();
function init(){
  canvas = document.querySelector('canvas');
  ctx = canvas.getContext('2d');
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;

  populateStems(height / 3, width, 25);
  generateBubbles(50);

  drawFrame();
};

function generateBubbles(bubblesLimit) {
  for (var i = 0; i <= bubblesLimit; i++) {
    bubbles.push(new Bubble(Math.random() * width, height + Math.random() * height / 2, 2 + Math.random() * 2));
  }
}

function populateStems(offset, limit, step) {
  for (var x = 0; x <= limit; x += step) {
    generateStem(x, height / 2 - offset / 2 + Math.random() * offset, 50)
  }
}

function generateStem(x, pointsLen, step) {
  var positions, y, offset, colorsArr, color;

  colorsArr = ['#6e881b', '#5d7314', '#54690f', '#657f0f', '#6f8f06'];
  color = Math.floor(1 + Math.random() * colorsArr.length - 1);
  positions = [];
	
  if (height < 600) {
  	offset = -40 + Math.random() * 80;
    for (y = height - pointsLen; y <= height + 100; y += step / 2) {
      positions.push({x: x + offset / (y / 2000), y: y, angle: Math.random() * 360, speed: 0.1 + Math.random() * 0.3});
    }
  } else {
  	offset = -100 + Math.random() * 200;
    for (y = height - pointsLen; y <= height + 100; y += step) {
      positions.push({x: x + offset / (y / 2000), y: y, angle: Math.random() * 360, speed: 0.1 + Math.random() * 0.3});
    }
  }
  stems.push(new Stem(positions, colorsArr[color]));
}

function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  ctx.fillStyle = '#17293a';
  ctx.fillRect(0, 0, width, height);
  bubbles.forEach(moveBubble);
  stems.forEach(function(stem) {
    stem.points.forEach(movePoint);
    stem.draw(ctx);
  });
}

function moveBubble(bubble) {
  if (bubble.y + bubble.radius <= 0) bubble.y = bubble.oldY;
  bubble.y += bubble.vy;
  bubble.draw(ctx);
}

function movePoint(point, index) {
  point.x += Math.sin(point.angle) / (index / 2.2);
  point.angle += point.speed;
}

以上就是码云笔记前端博客为大家带来的 canvas 实现的动画效果特效,希望对你有帮助,其实实现很简单,这里需要大家有一定的 JavaScript 基础,更要了解 canvas 的用法。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » canvas 带泡泡的海草动画特效

发表回复