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

    Canvas基本介绍

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

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

    基本用法

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

    "tutorial" width="150" height="150">浏览器版本不支持

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

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

    浏览器支持

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

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

     

    临摹canvas小案例

     实现代码：

    1. html>
    2. <html lang="en" >
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>HTML5线条照射爱心动画特效title>
    6.  
    7. <link rel="stylesheet" href="css/zzsc.css">
    8.  
    9. head>
    10. <body>
    11.  
    12. <canvas width="300" height="300" style="width:100%;height:100vh;" id="c">canvas>
    13.  
    14. <script  src="js/zzsc.js">script>
    15.  
    16. body>
    17. html>
    1. // zzsc.js
    2. /* DaTouWang URL: www.datouwang.com */
    3. var canvas = document.getElementById("c");
    4. var ctx = canvas.getContext("2d");
    5. var height = void 0,
    6.   width = void 0,
    7.   innerpoints = [],
    8.   outerpoints = [],
    9.   particles = [];
    10.  
    11. var noofpoints = 200,
    12.   trashold = 10;
    13. var x = void 0,
    14.   y = void 0,
    15.   p = void 0,
    16.   n = void 0,
    17.   point = void 0,
    18.   dx = void 0,
    19.   dy = void 0,
    20.   color = void 0;
    21. (deltaangle = (Math.PI * 2) / noofpoints), (r = Math.min(height, width) * 0.5);
    22.  
    23. var distance = function distance(x1, y1, x2, y2) {
    24.   return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
    25. };
    26. var mapVal = function mapVal(num, in_min, in_max, out_min, out_max) {
    27.   return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
    28. };
    29. var resize = function resize() {
    30.   height = ctx.canvas.clientHeight;
    31.   width = ctx.canvas.clientWidth;
    32.  
    33.   if (
    34.     ctx.canvas.clientWidth !== canvas.width ||
    35.     ctx.canvas.clientHeight !== canvas.height
    36.   ) {
    37.     console.log("resized");
    38.     canvas.width = width;
    39.     canvas.height = height;
    40.     ctx.translate(canvas.width / 2, canvas.height / 2);
    41.     ctx.rotate(-Math.PI);
    42.     innerpoints = [];
    43.     r = 10;
    44.     for (var i = deltaangle; i <= Math.PI * 2; i += deltaangle) {
    45.       x = r * 16 * Math.pow(Math.sin(i), 3);
    46.       y =
    47.         r *
    48.         (13 * Math.cos(i) -
    49.           5 * Math.cos(2 * i) -
    50.           2 * Math.cos(3 * i) -
    51.           Math.cos(4 * i));
    52.       innerpoints.push({
    53.         x: x,
    54.         y: y,
    55.       });
    56.  
    57.       x = 10 * r * 16 * Math.pow(Math.sin(i), 3);
    58.       y =
    59.         10 *
    60.         r *
    61.         (13 * Math.cos(i) -
    62.           5 * Math.cos(2 * i) -
    63.           2 * Math.cos(3 * i) -
    64.           Math.cos(4 * i));
    65.       outerpoints.push({
    66.         x: x,
    67.         y: y,
    68.       });
    69.  
    70.       var step = random(0.001, 0.003, true);
    71.       particles.push({
    72.         step: step,
    73.         x: x,
    74.         y: y,
    75.       });
    76.     }
    77.   }
    78. };
    79. var random = function random(min, max, isFloat) {
    80.   if (isFloat) {
    81.     return Math.random() * (max - min) + min;
    82.   }
    83.   return ~~(Math.random() * (max - min) + min);
    84. };
    85.  
    86. resize();
    87.  
    88. //particles = [...outerpoints];
    89. ctx.globalAlpha = 0.5;
    90. ctx.globalCompositeOperation = "source-over";
    91. var draw = function draw() {
    92.   ctx.fillStyle = "rgba(0,0,0,0.03)";
    93.   ctx.fillRect(-width, -height, width * 2, height * 2);
    94.   ctx.beginPath();
    95.  
    96.   for (var i = 0; i < innerpoints.length; i++) {
    97.     s = outerpoints[i];
    98.     d = innerpoints[i];
    99.     point = particles[i];
    100.  
    101.     if (distance(point.x, point.y, d.x, d.y) > 10) {
    102.       dx = d.x - s.x;
    103.       dy = d.y - s.y;
    104.  
    105.       point.x += dx * point.step;
    106.       point.y += dy * point.step;
    107.       color = distance(0, 0, point.x, point.y);
    108.       ctx.beginPath();
    109.       ctx.fillStyle = "hsl(" + (color % 360) + ",100%,50%)";
    110.       ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
    111.       ctx.closePath();
    112.       ctx.fill();
    113.     } else {
    114.       point.x = d.x;
    115.       point.y = d.y;
    116.       ctx.beginPath();
    117.       ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
    118.       ctx.closePath();
    119.       ctx.fill();
    120.       particles[i].x = s.x;
    121.       particles[i].y = s.y;
    122.       particles[i].step = random(0.001, 0.003, true);
    123.     }
    124.   }
    125. };
    126.  
    127. var render = function render() {
    128.   resize();
    129.   draw();
    130.   requestAnimationFrame(render);
    131. };
    132.  
    133. requestAnimationFrame(render);
    1. /* zzsc.css  */
    2. /* DaTouWang URL: www.datouwang.com */
    3. html,
    4. body {
    5.   border: 0;
    6.   padding: 0;
    7.   margin: 0;
    8.   overflow: hidden;
    9.   background: #000;
    10. }
    11.  
    12. .info {
    13.   z-index: 999;
    14.   position: absolute;
    15.   left: 0;
    16.   top: 0;
    17.   padding: 10px;
    18.   color: #fff;
    19.   background: rgba(0, 0, 0, 0.5);
    20.   text-transform: capitalize;
    21. }

     

     

     

  • 相关阅读:
    快速上手Django(七) -Django之登录cookie和session
    51.【结构体初始化的两种方法】
    Postgresql systemctl设置开机自启动
    CockroachDB-哈希分片索引
    AUC性能指标计算方法及优缺点
    35、Flink 的 Formats 之CSV 和 JSON Format
    LeetCode 47 全排列 II - Java 实现
    MemoryAnalyzer分析线上OOM异常
    AI实战营第二期 第五节 《目标检测与MMDetection》——笔记6
    微服务开发平台 Spring Cloud Blade 部署实践
  • 原文地址：https://blog.csdn.net/LUZENG_SA/article/details/126124718