html5绘制樱花图案之后加几张照片
时间: 2023-06-14 15:03:14 浏览: 92
你可以使用 HTML5 的 Canvas 元素绘制樱花图案,并在 Canvas 上叠加照片。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制樱花图案并叠加照片</title>
<style type="text/css">
canvas {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
// 获取 Canvas 元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 绘制樱花图案
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, canvas.width / 2);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#f0f0f0');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
ctx.fill();
ctx.fillStyle = '#ffc0cb';
ctx.beginPath();
ctx.arc(centerX - 50, centerY - 50, 50, 0, Math.PI * 2, false);
ctx.arc(centerX + 50, centerY - 50, 50, 0, Math.PI * 2, false);
ctx.fill();
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(centerX, centerY - 50, 50, 0, Math.PI * 2, false);
ctx.fill();
// 叠加照片
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = 'photo.jpg';
</script>
</body>
</html>
```
你需要将示例代码中的 `photo.jpg` 替换成你想要叠加的照片的路径。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)