欢迎加入前端交流群交流知识获取视频资料：

需求：绘制爱心图像轨迹。

实现：直接贴代码吧！

预览地址：https://codepen.io/wzc570738205/pen/dqqBpj

  1. <!DOCTYPE>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>模仿笔画</title>
  7.     <style type="text/css">
  8.         #_canvas {
  9.             background-color: rgb(, , );
  10.             border: 1px solid #;
  11.         }
  12.     </style>
  13. </head>
  14.  
  15. <body>
  16.  
  17.     <canvas id="_canvas" width="" height=''>sorry, your broswer does not support html5!</canvas>
  18.  
  19.     <script type="text/javascript">
  20.         var canvas_ = document.getElementById("_canvas");
  21.         var context = canvas_.getContext("2d");
  22.         //线条设置
  23.         context.strokeStyle = "red";
  24.         context.lineWidth = ;
  25.  
  26.         //线条数组
  27.         var array_paint = [];
  28.  
  29.         //背景图
  30.         var img = new Image()
  31.         img.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fv5kg78i8kj30xc0m8ank.jpg"
  32.         context.drawImage(img, , );
  33.  
  34.         function paint() {
  35.             context.beginPath();
  36.             context.moveTo(array_paint[][], array_paint[][]);
  37.             if (array_paint.length == )
  38.                 context.lineTo(array_paint[][] + , array_paint[][] + );
  39.             else {
  40.                 var i = ;
  41.                 for (i in array_paint) {
  42.                     context.lineTo(array_paint[i][], array_paint[i][]);
  43.                     context.moveTo(array_paint[i][], array_paint[i][]);
  44.                 }
  45.  
  46.             }
  47.             context.closePath();
  48.             context.stroke();
  49.         }
  50.  
  51.         let num = -;
  52.         let timer = null;
  53.         let list = []
  54.         //创建坐标
  55.         list = heartShape(, , )
  56.  
  57.         function people() {
  58.             num++;
  59.             var imgpeople = new Image()
  60.             imgpeople.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fvcmafdhe6j305k05k3ye.jpg"
  61.             context.drawImage(imgpeople, list[num].current_x *  /  - , list[num].current_y *  /  - , ,
  62.                 );
  63.             context.clearRect(, , screen.width, screen.height);
  64.             context.drawImage(img, , );
  65.  
  66.             console.log(list[num].current_x *  / );
  67.             if (num < list.length - ) {
  68.                 let current_x = (Math.random() * ).toFixed();
  69.                 let current_y = (Math.random() * ).toFixed();
  70.                 array_paint.push([list[num].current_x *  / , list[num].current_y *  / ]);
  71.                 paint();
  72.                 if (num > ) {
  73.                     context.drawImage(imgpeople, list[num].current_x *  /  - , list[num].current_y *  /  -
  74.                         , , );
  75.                 }
  76.             } else {
  77.                 array_paint = [];
  78.                 for (var i = ; i < list.length; i++) {
  79.                     array_paint.push([list[i].current_x *  / , list[i].current_y *  / ]);
  80.                     paint();
  81.                     context.drawImage(imgpeople, list[num].current_x *  /  - , list[num].current_y *  /  -
  82.                         , , );
  83.                 }
  84.                 clearInterval(timer);
  85.             }
  86.  
  87.         }
  88.  
  89.         timer = setInterval(people, )
  90.  
  91.         function heartShape(r, dx, dy) { //r:大小;dx:水平偏移;dy:垂直偏移;c:颜色
  92.             var m, n, x, y, i;
  93.             let arr = [];
  94.             for (i = ; i <= 7.9; i += 0.04) {
  95.                 m = i;
  96.                 n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) -  * Math.sin(i) +
  97.                     );
  98.                 x = n * Math.cos(m) + dx;
  99.                 y = n * Math.sin(m) + dy;
  100.                 arr.push({
  101.                     current_x: x,
  102.                     current_y: y
  103.                 })
  104.             }
  105.             return arr
  106.         }
  107.     </script>
  108. </body>
  109.  
  110. </html>

canvas绘制爱心的更多相关文章

  1. canvas绘制爱心的几种方法

    第一种方法:桃心形公式 代码实现的一种方法 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  2. js利用canvas绘制爱心

    js代码如下: var cav = document.getElementById("a").getContext("2d"); function draw(x ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  8. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. ORACLE.错误码 ORA-12154 及Oracle客户端免安装版的设置

    .错误码 ORA-12154相信作为ORACLE数据库的开发人员没有少碰到“ORA-12154: TNS: 无法解析指定的连接标识符”,今天我也又碰到了类似的情况,将我的解决方法进行小结,希望能对碰到 ...

  2. shopping car 1.0

    #!/usr/bin/env python# -*- coding: utf-8 -*-# @File : 20180510001.py# @Author: Anthony.waa# @Date : ...

  3. 洛谷P2607 [ZJOI2008]骑士(树形dp)

    题目描述 Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火绵延五百里, ...

  4. Java基础7一面向对象

    1.构造方法: (1)定义:方法名称必须和类名相同,没有返回值,也没有void (2)语法: [访问修饰符] 类名(){ } (3)作用:创建对象.初始化成员变量. (4)构造方法的分类: A.无参数 ...

  5. 第八周读书笔记（人月神话X月亮与六便士）——到底什么才是一个程序员的自我修养？

    写了这么久的读书笔记,涉及到问题大多是一些如何把软件工程做好,如何把自己的职业生涯做好.但总感觉逻辑链上缺了一环,亦即:我们为什么要把软件工程做好,我们成为一名优秀的职业生涯的意义到底在于什么?我觉得 ...

  6. Find Bugs

    为什么没有早点知道有这么好用的插件呢?

  7. PHP中each与list用法分析

    1.each的用法 先看API array each ( array &$array ) api里是这么描述的:each — 返回数组中当前的键/值对并将数组指针向前移动一步 我们先来看看返回 ...

  8. jenkins+testlink+python搭建自动化测试环境

    一. 环境搭建 jenkins安装与配置请参考我的另一篇博文:https://www.cnblogs.com/wuxunyan/p/9592953.html testlink安装请参考博文:https ...

  9. [网络流24题] 最长k可重线段集问题 (费用流)

    洛谷传送门 LOJ传送门 最长k可重区间集问题的加强版 大体思路都一样的,不再赘述,但有一些细节需要注意 首先,坐标有负数,而且需要开$longlong$算距离 但下面才是重点: 我们把问题放到了二维 ...

  10. Hibernate Session操作

    1.增加 @Test public void add(){ Configuration cfg=new Configuration().configure(); SessionFactory fact ...