第一种方法:桃心形公式



代码实现的一种方法

<!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. Django的一些操作与视图函数

    一 . Django的安装 pip install django==1.14.6 # 后面的数字是django的版本 二 .  通过命令行(cmd)来创建Django项目 1. 切换到保存项目的文件夹 ...

  2. python之路--线程的其他方法

    一 . current_thread的用法 import threading import time from threading import Thread, current_thread def ...

  3. drf信号量

    Django信号量回顾及drf信号量常用操作 一.在写接口视图时,保存/删除/更新数据前后需要对序列化后的数据进行处理的方法: 1.重写mixins.CreateModelMixin中恩的create ...

  4. Servlet的cookie使用,500报错,tomcat和cookie语法不兼容解决

    出现类似上图的错误,应该是tomcat和cookie的语法不兼容 cookie不要用逗号","作分隔符,换井号#试试就可以了

  5. python 基础篇

    1.编程语言介绍. 1.机器语言:直接用二进制编程,直接对硬件的控制,需对硬件掌握比较深. 优点:执行效率快 缺点:开发效率低下 2.汇编语言:用英文标签代替二进制编写程序,直接对硬件的控制,需对硬件 ...

  6. controller层负责创建类传递类给service;service层负责逻辑编写调用dao层 将编写后的类传递到dao层,保证事务的正确性;dao层负责数据的持久化

    controller层负责创建类传递类给service:service层负责逻辑编写调用dao层 将编写后的类传递到dao层,保证事务的正确性:dao层负责数据的持久化

  7. 提交已经注入文件的表单给后台上传图片 使用ajaxsubmit

  8. HTML元素类别及转换

    位置特性分类元素分为三类:块级元素,行内元素,行级块元素 1.块级元素(block)        特点: (1)可以设置宽高.内.外边距:               (2)独占一行(即前后均有换行 ...

  9. DRF 版本和认证

    Django Rest Framework 版本控制组件 DRF的版本 版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 当我们 ...

  10. 前端 -- CSS基础

    一,CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二,CSS语法 1 ...