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!
Which inscription is the most promising in the currency circle?
What does edge computing gateway mean?
What are the static code checking tools?
What to do if memory usage is too high
Why webstorm cannot run the file
There are several types of php arrays
What system is qad?
How do I set up WeChat to require my consent when people add me to a group?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
