[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效

最新推荐文章于 2024-06-12 10:25:35 发布

北木南-

最新推荐文章于 2024-06-12 10:25:35 发布

阅读量1.7k

点赞数 2

分类专栏： js 文章标签：前端 css3 javascript

本文链接：https://blog.csdn.net/LUZENG_SA/article/details/126124718

版权

js 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

Canvas基本介绍

Canvas介绍
1.canvas是html5的一个新标签，属于h5的新特性
2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo
3.它是通过javascript来画的，即脚本绘制图形

canvas可以用来干啥呢？
1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡）
2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas）
3.广告banner的动态效果非常适合用canvas制作
4.canvas还可以用来内嵌一些网页

基本用法

<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :

<canvas id="tutorial" width="150" height="150">浏览器版本不支持</canvas>

<canvas>在没有设置宽高的时候,默认初始化为 :

<canvas width='300px' height='150px'></canvas>

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持及其属性和方法。

**注释：**Internet Explorer 8 以及更早的版本不支持元素。

临摹canvas小案例

实现代码：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5线条照射爱心动画特效</title>

<link rel="stylesheet" href="css/zzsc.css">

</head>
<body>

<canvas width="300" height="300" style="width:100%;height:100vh;" id="c"></canvas>

<script  src="js/zzsc.js"></script>

</body>
</html>

// zzsc.js
/* DaTouWang URL: www.datouwang.com */
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var height = void 0,
  width = void 0,
  innerpoints = [],
  outerpoints = [],
  particles = [];

var noofpoints = 200,
  trashold = 10;
var x = void 0,
  y = void 0,
  p = void 0,
  n = void 0,
  point = void 0,
  dx = void 0,
  dy = void 0,
  color = void 0;
(deltaangle = (Math.PI * 2) / noofpoints), (r = Math.min(height, width) * 0.5);

var distance = function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
};
var mapVal = function mapVal(num, in_min, in_max, out_min, out_max) {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};
var resize = function resize() {
  height = ctx.canvas.clientHeight;
  width = ctx.canvas.clientWidth;

  if (
    ctx.canvas.clientWidth !== canvas.width ||
    ctx.canvas.clientHeight !== canvas.height
  ) {
    console.log("resized");
    canvas.width = width;
    canvas.height = height;
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(-Math.PI);
    innerpoints = [];
    r = 10;
    for (var i = deltaangle; i <= Math.PI * 2; i += deltaangle) {
      x = r * 16 * Math.pow(Math.sin(i), 3);
      y =
        r *
        (13 * Math.cos(i) -
          5 * Math.cos(2 * i) -
          2 * Math.cos(3 * i) -
          Math.cos(4 * i));
      innerpoints.push({
        x: x,
        y: y,
      });

      x = 10 * r * 16 * Math.pow(Math.sin(i), 3);
      y =
        10 *
        r *
        (13 * Math.cos(i) -
          5 * Math.cos(2 * i) -
          2 * Math.cos(3 * i) -
          Math.cos(4 * i));
      outerpoints.push({
        x: x,
        y: y,
      });

      var step = random(0.001, 0.003, true);
      particles.push({
        step: step,
        x: x,
        y: y,
      });
    }
  }
};
var random = function random(min, max, isFloat) {
  if (isFloat) {
    return Math.random() * (max - min) + min;
  }
  return ~~(Math.random() * (max - min) + min);
};

resize();

//particles = [...outerpoints];
ctx.globalAlpha = 0.5;
ctx.globalCompositeOperation = "source-over";
var draw = function draw() {
  ctx.fillStyle = "rgba(0,0,0,0.03)";
  ctx.fillRect(-width, -height, width * 2, height * 2);
  ctx.beginPath();

  for (var i = 0; i < innerpoints.length; i++) {
    s = outerpoints[i];
    d = innerpoints[i];
    point = particles[i];

    if (distance(point.x, point.y, d.x, d.y) > 10) {
      dx = d.x - s.x;
      dy = d.y - s.y;

      point.x += dx * point.step;
      point.y += dy * point.step;
      color = distance(0, 0, point.x, point.y);
      ctx.beginPath();
      ctx.fillStyle = "hsl(" + (color % 360) + ",100%,50%)";
      ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();
    } else {
      point.x = d.x;
      point.y = d.y;
      ctx.beginPath();
      ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();
      particles[i].x = s.x;
      particles[i].y = s.y;
      particles[i].step = random(0.001, 0.003, true);
    }
  }
};

var render = function render() {
  resize();
  draw();
  requestAnimationFrame(render);
};

requestAnimationFrame(render);

/* zzsc.css  */
/* DaTouWang URL: www.datouwang.com */
html,
body {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.info {
  z-index: 999;
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  text-transform: capitalize;
}