Heim > Artikel > Web-Frontend > Zeichnen Sie Herzen im WEB
Zeichnen Sie Herzen im WEB
- php中世界最好的语言Original
- 2017-12-30 17:58:183270Durchsuche
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('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>
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
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?