canvas绘制爱心的几种方法总结(推荐)

2024-10-31 08:58:23

第一种方法

代码实现的一种方法

<!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(x, y) {
  this.x = x;
  this.y = y;
  this.vertices = [];
  for(let i=0; i<30; i++) {
  var step = i / 30 * (Math.PI * 2);//设置心上面两点之间的角度，具体分成多少份，好像需要去试。
  var vector = {
   x : (15 * Math.pow(Math.sin(step), 3)),
   y : -(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() {
  ctx.translate(-1000,this.y);//这一步跟ctx.shadowOffsetX必须一起使用，不明白为啥？
  ctx.beginPath();
  for(let i=0; i<30; i++) {
  var vector = this.vertices[i];
  ctx.lineTo(vector.x, vector.y);
  }
  ctx.shadowColor = "red";
  ctx.shadowOffsetX = this.x+1000;
  ctx.fill();
 }
 canvas.onmousedown = function(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  var heart = new Heart(x, y);
  heart.draw();
 }
 </script>
</body>
</html>

代码里面有两处地方不明白 ctx.translate(-1000,this.y); 跟 ctx.shadowOffsetX = this.x+1000; 能感觉出来什么意思，但是不知道为啥要加上，去掉就不行了。请路过的各位大佬们帮忙解答一下~~

以上这篇canvas绘制爱心的几种方法总结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

canvas实现爱心和彩虹雨效果

效果图: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementByI
canvas绘制爱心的几种方法总结(推荐)

第一种方法代码实现的一种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用桃心形方程绘制爱心</title> </head> <body> <canvas></canvas> <script> var canvas = document
js+html5实现canvas绘制镂空字体文本的方法

本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s
Java 在PDF中绘制形状的两种方法

在我们编辑PDF文档的过程中,有时候需要在文档中添加一些如多边形.矩形.椭圆形之类的图形,而Free Spire PDF for Java 则正好可以帮助我们在Java程序中通过代码在PDF文档中绘制形状,以及设置形状边线颜色和填充色. Jar包导入方法一:下载Free Spire.PDF for Java包并解压缩,然后将lib文件夹下的Spire.Pdf.jar包作为依赖项导入到Java应用程序中方法二:直接通过Maven仓库安装JAR包,配置pom.xml文件的代码如下: <repos
Ajax解决缓存的5种方法总结(推荐)

1.在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0″). 2.在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache"). 3.在URL后面加上一个随机数: "fresh=" + Math.random();. 4.在URL后面加上时间搓:"nowti
JS中动态创建元素的三种方法总结(推荐)

1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入
Python中创建字典的几种方法总结(推荐)

1.传统的文字表达式: >>> d={'name':'Allen','age':21,'gender':'male'} >>> d {'age': 21, 'name': 'Allen', 'gender': 'male'} 如果你可以事先拼出整个字典,这种方式是很方便的. 2.动态分配键值: >>> d={} >>> d['name']='Allen' >>> d['age']=21 >>> d[
遍历python字典几种方法总结(推荐)

如下所示: aDict = {'key1':'value1', 'key2':'value2', 'key3':'value3'} print '-----------dict-------------' for d in aDict: print "%s:%s" %(d, aDict[d]) print '-----------item-------------' for (k,v) in aDict.items(): print '%s:%s' %(k, v) #效率最高 prin
jquery的ajax提交form表单的两种方法小结(推荐)

jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:
ubuntu下安装程序的三种方法总结(推荐)

引言在ubuntu当中,安装应用程序我所知道的有三种方法,分别是apt-get,dpkg安装deb和make install安装源码包三种.下面针对每一种方法各举例来说明. apt-get方法使用apt-get install来安装应用程序算是最常见的一种安装方法了,比如我要安装build-essential这个软件,使用以下,他会帮我把所有的依赖包都一起安装了. sudo apt-get install build-essential 执行上述命令以后,我们可以看到一下信息,The fol
java8 统计字符串字母个数的几种方法总结(推荐)

1.统计字符串字母个数(并且保持字母顺序) 比如: aabbbbbbbba喔喔bcab cdabc deaaa 目前我做知道的有5种方式噢,如果你还有更好的,欢迎赐教 //方式1 public static void letterCount1(String s) { s=s.replaceAll(" +", ""); //1,转换成字符数组 char c[]=s.toCharArray(); Map<Character, Integer> tree=ne

canvas绘制爱心的几种方法总结(推荐)

相关推荐

随机推荐