canvas画圣诞树
时间: 2023-02-09 08:59:28 浏览: 203
可以用 canvas 来画圣诞树。
下面是一个简单的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 画圣诞树的框架
ctx.beginPath();
ctx.moveTo(60, 20);
ctx.lineTo(60, 80);
ctx.lineTo(20, 80);
ctx.lineTo(20, 20);
ctx.closePath();
ctx.stroke();
// 画圣诞树的叶子
ctx.beginPath();
ctx.arc(60, 20, 40, 0, Math.PI, false);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();
// 画圣诞树的圆圈装饰
ctx.beginPath();
ctx.arc(40, 40, 10, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(80, 40, 10, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(60, 60, 10, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
```
这段代码会在网页上画出一个绿色的圣诞树,并在上面画三个圆圈装饰。
希望这对你有帮助!
阅读全文