第一种方法：桃心形公式



代码实现的一种方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用桃心形方程绘制爱心</title>

</head>

<body>

    <canvas></canvas>

    <script>

        var canvas = document.querySelector('canvas');

        var ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;

        var Heart = function(ctx, x, y, a) {

            this.ctx = ctx;

            this.x = x;

            this.y = y;

            this.a = a;

            this.vertices = [];

            for(let i=0; i<50; i++) {

                var step = i/50*(Math.PI*2);//设置心上面两点之间的角度，具体分成多少份，好像需要去试。

                var vector = {

                    x : this.a*(16 * Math.pow(Math.sin(step), 3)),

                    y : this.a*(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))

                }

                this.vertices.push(vector);

            }

        }

        Heart.prototype.draw = function() {

            this.ctx.beginPath();

            this.ctx.translate(this.x,this.y);

            this.ctx.rotate(Math.PI);

            for(let i=0; i<50; i++) {

                var vector = this.vertices[i];

                this.ctx.lineTo(vector.x, vector.y);

            }

            this.ctx.fillStyle = "red";

            this.ctx.fill();

        }

        canvas.onmousedown = function(e) {

            var x = e.offsetX;

            var y = e.offsetY;

            var a = 6;

            var heart = new Heart(ctx, x, y, a);

            heart.draw();

        }

    </script>

</body>

</html>

第二种方法：笛卡尔的心形线



代码实现的一种方法：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>使用笛卡尔心形线方程绘制爱心</title>

</head>

<body>

	<canvas></canvas>

	<script>

		var canvas = document.querySelector('canvas');

		var ctx = canvas.getContext('2d');

		canvas.width = window.innerWidth;

		canvas.height = window.innerHeight;

		function Heart(ctx, x, y, a) {

			this.ctx = ctx;

			this.x = x;

			this.y = y;

			this.a = a;

			this.draw = function() {

				this.ctx.beginPath();

				this.ctx.translate(this.x, this.y);

				this.ctx.rotate(Math.PI);

				var start = 0;

				for(var i=0; i<500; i++) {

					start += Math.PI*2/500;

					var end = start+Math.PI*2/500;

					var r = this.a*(1-Math.sin(start));

					ctx.arc(0, 0, r, start, end, false);

				}

				ctx.fillStyle = "red";

				ctx.fill();

			}

		}

		canvas.onmousedown = function(e) {

			var x = e.offsetX;

			var y = e.offsetY;

			var a = 60;

			var heart = new Heart(ctx, x, y, a);

			heart.draw();

		}

	</script>

</body>

</html>

第三种方法：

canvas绘制爱心的几种方法的更多相关文章

  1. HTML5 Canvas中绘制椭圆的几种方法

    1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

  2. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  3. canvas绘制爱心

    需求:绘制爱心图像轨迹. 实现:直接贴代码吧! 预览地址:https://codepen.io/wzc570738205/pen/dqqBpj <!DOCTYPE> <html> ...

  4. js利用canvas绘制爱心

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

  5. 小程序canvas绘制纯色圆角区域 setdata数组某一项

    小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...

  6. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  7. ChemDraw Pro绘制无环链结构的两种方法

    ChemDraw Pro 14是一款专门针对化学图形绘制而开发制作的编辑软件,是目前工科类常用的绘制化学结构工具,用于快速绘制常用的环结构组成.以下教程讲解ChemDraw Pro绘制无环链结构的两种 ...

  8. 如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法

    这篇博文主要针对浏览器中绘制椭圆的方法扩展.在网上搜索了很多,发现他们绘制椭圆的方式都有缺陷.其中有压缩法,计算法,贝塞尔曲线法等多种方式.但是都不能很好的绘制出椭圆.所有我就对这个绘制椭圆的方式进行 ...

  9. canvas绘制清晰的方法

    很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. <canvas ref=&quo ...

随机推荐

  1. qtp 自动化测试---点滴 获取属性性/修改窗体标题

    1 GetROProperty获取对应属性值 value url (这里出错了) If Window("新增").WinObject("TRzDBEdit_10" ...

  2. vue監聽屬性

    使用$watch,就是監聽到某個值發生變化,執行回調函數.

  3. hibernate主配置文件的配置

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-configuratio ...

  4. iOS 通知推送APNS

    结合网上各个资料,再简单整理的一份. 一.APNS推送说明 1.你的IOS应用需要去注册APNS消息推送功能. 2.当苹果APNS推送服收到来自你应用的注册消息就会返回一串device token给你 ...

  5. FFmpeg 将YUV数据转RGB

    只要开始初始化一次,结束后释放就好,中间可以循环转码 AVFrame *m_pFrameRGB,*m_pFrameYUV; uint8_t *m_rgbBuffer,*m_yuvBuffer; str ...

  6. 修改iptables后重启返回错误

    在防火墙添加规则后我是这样改的vi /etc/sysconfig/iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 21 -j ...

  7. Elasticsearch 分片路由原理指定分片存储查询

    Elasticsearch 项目中使用到Es的父子结构.在数据填充之后,查看每个节点的数据分布情况,发现有的节点数据多,有的节点少的情况,在未使用Es父级结构之前,每个节点的数据分布还算平均,如下图: ...

  8. 为什么Elasticsearch查询变得这么慢了？

    参考内容:https://mp.weixin.qq.com/s/RTpBaFpNELQCO6VE0KMfsw

  9. BZOJ2434 [NOI2011] 阿狸的打字机 【树链剖分】【线段树】【fail树】【AC自动机】

    题目分析: 画一下fail树,就会发现就是x的子树中属于y路径的,把y剖分一下,用线段树处理 $O(n*log^2 n)$. 代码: #include<bits/stdc++.h> usi ...

  10. AtcoderARC062F Painting Graphs with AtCoDeer 【双连通分量】【polya原理】

    题目分析: 如果一个双连通分量是简单环,那么用polya原理计数循环移位即可. 如果一个双连通分量不是简单环,那么它必然可以两两互换,不信你可以证明一下相邻的可以互换. 如果一条边是桥,那么直接乘以k ...