html5 canvas绘制爱心的方法示例

互联网 17-10-31

第一种方法

代码实现的一种方法

<!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>

以上就是html5 canvas绘制爱心的方法示例的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： h5