js爱心代码,爱心内部显示图片
时间: 2024-05-20 17:09:28 浏览: 108
JS爱心代码是一种常见的网页特效,它可以通过JS脚本实现在网页中绘制出一个爱心,并在其中显示图片。实现的原理是利用HTML5的canvas画布和JS的API,通过计算得到爱心的路径并填充颜色。而图片则是通过canvas的drawImage()方法绘制到爱心内部。
以下是一个简单的JS爱心代码示例,其中包含一个示例图片:
```html
<!DOCTYPE html>
<html>
<head>
<title>JS爱心代码</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "https://www.example.com/heart.png";
img.onload = function() {
ctx.drawImage(img, 0, 0);
drawHeart();
}
function drawHeart() {
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.bezierCurveTo(200, 75, 150, 50, 100, 75);
ctx.bezierCurveTo(75, 100, 75, 150, 100, 175);
ctx.bezierCurveTo(150, 200, 200, 250, 200, 300);
ctx.bezierCurveTo(200, 250, 250, 200, 300, 175);
ctx.bezierCurveTo(325, 150, 325, 100, 300, 75);
ctx.bezierCurveTo(250, 50, 200, 75, 200, 100);
ctx.fillStyle = "red";
ctx.fill();
}
</script>
</body>
</html>
```