What I bring to you this time is how to draw hearts on the WEB. Without further ado, I will directly present a case for you to analyze.
<!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>
I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to php Chinese website Other related articles!
Related reading:
Answers to questions about camel case naming and JS
Boolean values, relational operators in JS, Detailed explanation and examples of logical operators
How to customize the console object when using JS
The above is the detailed content of Draw hearts on the WEB. For more information, please follow other related articles on the PHP Chinese website!
How to get token
Usage of get function in c language
What is LAN
Excel input value is illegal
How to solve the problem of no internet access when the computer is connected to wifi
How to establish a local area network in xp
Will the Bitcoin inscription disappear?
How to create a bitmap index in mysql
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
