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


Posted in Javascript onOctober 31, 2017

第一种方法

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

代码实现的一种方法

<!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绘制爱心的几种方法总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
Node.js文件编码格式的转换的方法
Apr 27 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
ES6扩展运算符用法实例分析
Oct 31 #Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 #Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 #Javascript
帝国cms首页列表页实现点赞功能
Oct 30 #Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 #Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 #Javascript
JavaScript数组push方法使用注意事项
Oct 30 #Javascript
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP Directory 函数的详解
2013/03/07 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
js代码实现微博导航栏
2015/07/30 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
实例解析Array和String方法
2016/12/14 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python素数检测的方法
2015/05/11 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
项目投资建议书
2014/05/16 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
学生逃课检讨书
2015/02/17 职场文书
学校重阳节活动总结
2015/03/24 职场文书
高一军训口号
2015/12/25 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python