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 相关文章推荐
浅析js封装和作用域
Jul 09 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
js 作用域和变量详解
Feb 16 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
js正则表达式简单校验方法
Jan 03 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
js友好的时间返回函数
2016/08/24 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python交互式图形编程实例(二)
2017/11/17 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
C语言50道问题
2014/10/23 面试题
作弊检讨书1000字
2014/02/01 职场文书
草船借箭教学反思
2014/02/03 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
小学教师评语大全
2014/04/23 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
民事辩护词范文
2015/05/21 职场文书
单位综合评价意见
2015/06/05 职场文书
重温入党誓词主持词
2015/06/29 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
运动会800米赞词
2015/07/22 职场文书