recherche

Maison >interface Web >js tutoriel >Dessiner des cœurs sur le WEB

Dessiner des cœurs sur le WEB

php中世界最好的语言
php中世界最好的语言original
2017-12-30 17:58:183369parcourir

Cette fois je vais vous montrer comment dessiner un coeur sur le WEB Sans plus attendre, je vous présente directement un cas à analyser. 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>使用桃心形方程绘制爱心</title>
</head>
<body>
 <canvas></canvas>
 <script>
 var canvas = document.querySelector(&#39;canvas&#39;);
 var ctx = canvas.getContext(&#39;2d&#39;);
 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>

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php autre . articles connexes!

Lecture connexe :

Réponses aux questions sur la dénomination des cas de chameaux et JS

Valeurs booléennes, opérateurs relationnels en JS, Explication détaillée et exemples d'opérateurs logiques

Comment personnaliser l'objet console lors de l'utilisation de JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment jQuery peut-il lire les fichiers json locauxArticle suivant：Comment jQuery peut-il lire les fichiers json locaux

Articles Liés

Voir plus