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

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

实现：直接贴代码吧！

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

<!DOCTYPE>

<html>

<head>

    <meta charset="UTF-8">

    <title>模仿笔画</title>

    <style type="text/css">

        #_canvas {

            background-color: rgb(, , );

            border: 1px solid #;

        }

    </style>

</head>

<body>

    <canvas id="_canvas" width="" height=''>sorry, your broswer does not support html5!</canvas>

    <script type="text/javascript">

        var canvas_ = document.getElementById("_canvas");

        var context = canvas_.getContext("2d");

        //线条设置

        context.strokeStyle = "red";

        context.lineWidth = ;

        //线条数组

        var array_paint = [];

        //背景图

        var img = new Image()

        img.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fv5kg78i8kj30xc0m8ank.jpg"

        context.drawImage(img, , );

        function paint() {

            context.beginPath();

            context.moveTo(array_paint[][], array_paint[][]);

            if (array_paint.length == )

                context.lineTo(array_paint[][] + , array_paint[][] + );

            else {

                var i = ;

                for (i in array_paint) {

                    context.lineTo(array_paint[i][], array_paint[i][]);

                    context.moveTo(array_paint[i][], array_paint[i][]);

                }

            }

            context.closePath();

            context.stroke();

        }

        let num = -;

        let timer = null;

        let list = []

        //创建坐标

        list = heartShape(, , )

        function people() {

            num++;

            var imgpeople = new Image()

            imgpeople.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fvcmafdhe6j305k05k3ye.jpg"

            context.drawImage(imgpeople, list[num].current_x *  /  - , list[num].current_y *  /  - , ,

                );

            context.clearRect(, , screen.width, screen.height);

            context.drawImage(img, , );

            console.log(list[num].current_x *  / );

            if (num < list.length - ) {

                let current_x = (Math.random() * ).toFixed();

                let current_y = (Math.random() * ).toFixed();

                array_paint.push([list[num].current_x *  / , list[num].current_y *  / ]);

                paint();

                if (num > ) {

                    context.drawImage(imgpeople, list[num].current_x *  /  - , list[num].current_y *  /  -

                        , , );

                }

            } else {

                array_paint = [];

                for (var i = ; i < list.length; i++) {

                    array_paint.push([list[i].current_x *  / , list[i].current_y *  / ]);

                    paint();

                    context.drawImage(imgpeople, list[num].current_x *  /  - , list[num].current_y *  /  -

                        , , );

                }

                clearInterval(timer);

            }

        }

        timer = setInterval(people, )

        function heartShape(r, dx, dy) { //r:大小;dx:水平偏移;dy:垂直偏移;c:颜色

            var m, n, x, y, i;

            let arr = [];

            for (i = ; i <= 7.9; i += 0.04) {

                m = i;

                n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) -  * Math.sin(i) +

                    );

                x = n * Math.cos(m) + dx;

                y = n * Math.sin(m) + dy;

                arr.push({

                    current_x: x,

                    current_y: y

                })

            }

            return arr

        }

    </script>

</body>

</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. MongoDB: The Definitive Guide

    第一章 简介 MongoDB是面向文档的数据库,不是关系型数据库.内置对MapReduce的支持,以及对地理空间索引的支持. 丰富的数据模型 容易扩展,它所采用的面向文档的数据模型可以使其在多台服务器 ...

  2. 常用图片、文字轮播插件SuperSlide

    SuperSlide 是致力于实现网站统一特效调用的函数,能解决大部分标签切换.焦点图切换等效果,还能多个slide组合创造更多的效果.(兼容ie内核(包括无敌的ie6).webkit内核.ff.op ...

  3. 利用JavaScript的%读分秒

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. linux抓包命令-tcpdump命令详解

    最近调试支付接口的时候,遇到了一个奇怪的问题:我按照支付接口文档,对接支付通道,当消费业务正常后,调试查余和冲正的时候,支付通道的对接技术告诉我,系统没有我们支付系统的请求报文,数据库和日志中都没有, ...

  5. Java之关于面向对象

    面向对象,呃,别给我说程序员找不到对象,那是windows才会出现的情况~~~ 就简单记下笔记什么的吧. 1.关于定义和赋值 之前总是搞混淆,说到底是没有搞清楚. shit bigOne=new sh ...

  6. Discuz 3x 配置问题

    1.注意config里面配置的路径 2.注意ucenter里面 的密钥要一直 3.IP 的选择

  7. 【转】Oracle基础结构认知—进程及逻辑结构 礼记八目 2017-12-17 19:33:21

    原文地址:https://www.toutiao.com/i6500477672349499917/ 一. Process Structure进程结构 Oracle有两种类型的进程: 服务器进程和后台 ...

  8. BZOJ 1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏 幼儿园测试题

    本来以为是一道数学题,一顿XJBT导式子,结果就是个幼儿园都会的模拟. Code: #include<bits/stdc++.h> #define ll long long using n ...

  9. bzoj 1189: [HNOI2007]紧急疏散evacuate 分层图最大流_拆点_二分

    Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一 块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是 ...

  10. MySQL-字符类型与约束条件

    创建表完整的语法: create table 表名(字段名1 类型[(宽度) 约束条件],字段名2 类型[(宽度) 约束条件],字段名3 类型[(宽度) 约束条件]); 注意事项: 1. 在同一张表中 ...