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!
Gängige HTML-Tags
Die zehn besten Börsen für digitale Währungen
So verwenden Sie die Diktatfunktion in Python
Ist es umso besser, je höher die CPU-Frequenz des Computers ist?
So verwenden Sie Findbugs
Was sind die Attribute eines Tags?
Verwendung der Switch-Anweisung
Verwendung beliebiger Zeichen durch reguläre Ausdrücke
