suchen

Heim >Web-Frontend >js-Tutorial >Zeichnen Sie Herzen im WEB

Zeichnen Sie Herzen im WEB

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

Dieses Mal zeige ich Ihnen, wie man im WEB ein Herz zeichnet. Ohne weitere Umschweife präsentiere ich Ihnen direkt einen Fall zur Analyse. 

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website andere Verwandte Artikel!

Verwandte Lektüre:

Antworten auf Fragen zur Kamelfallbenennung und JS

Boolesche Werte, relationale Operatoren in JS, Ausführliche Erklärung und Beispiele logischer Operatoren

So passen Sie das Konsolenobjekt bei Verwendung von JS an

Das obige ist der detaillierte Inhalt vonZeichnen Sie Herzen im WEB. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann jQuery lokale JSON-Dateien lesen?Nächster Artikel：Wie kann jQuery lokale JSON-Dateien lesen?

In Verbindung stehende Artikel

Mehr sehen