canvas画一朵云
时间: 2023-07-01 10:29:06 浏览: 60
下面是使用 HTML5 canvas 绘制一朵云的示例代码:
```html
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制云的外形
ctx.beginPath();
ctx.arc(80, 80, 60, 0, Math.PI*2, true);
ctx.arc(120, 80, 40, 0, Math.PI*2, true);
ctx.arc(140, 80, 30, 0, Math.PI*2, true);
ctx.arc(160, 80, 20, 0, Math.PI*2, true);
ctx.arc(170, 80, 10, 0, Math.PI*2, true);
ctx.arc(180, 80, 5, 0, Math.PI*2, true);
ctx.arc(184, 80, 2, 0, Math.PI*2, true);
ctx.arc(192, 76, 4, 0, Math.PI*2, true);
ctx.arc(196, 72, 5, 0, Math.PI*2, true);
ctx.arc(200, 65, 6, 0, Math.PI*2, true);
ctx.arc(204, 60, 8, 0, Math.PI*2, true);
ctx.arc(210, 55, 10, 0, Math.PI*2, true);
ctx.arc(215, 52, 12, 0, Math.PI*2, true);
ctx.arc(225, 50, 14, 0, Math.PI*2, true);
ctx.arc(235, 50, 16, 0, Math.PI*2, true);
ctx.arc(245, 52, 18, 0, Math.PI*2, true);
ctx.arc(255, 55, 20, 0, Math.PI*2, true);
ctx.arc(258, 60, 22, 0, Math.PI*2, true);
ctx.arc(265, 70, 25, 0, Math.PI*2, true);
ctx.arc(268, 80, 30, 0, Math.PI*2, true);
ctx.arc(265, 90, 25, 0, Math.PI*2, true);
ctx.arc(258, 100, 22, 0, Math.PI*2, true);
ctx.arc(255, 105, 20, 0, Math.PI*2, true);
ctx.arc(245, 108, 18, 0, Math.PI*2, true);
ctx.arc(235, 110, 16, 0, Math.PI*2, true);
ctx.arc(225, 110, 14, 0, Math.PI*2, true);
ctx.arc(215, 108, 12, 0, Math.PI*2, true);
ctx.arc(210, 105, 10, 0, Math.PI*2, true);
ctx.arc(204, 100, 8, 0, Math.PI*2, true);
ctx.arc(200, 95, 6, 0, Math.PI*2, true);
ctx.arc(196, 88, 5, 0, Math.PI*2, true);
ctx.arc(192, 84, 4, 0, Math.PI*2, true);
ctx.arc(184, 80, 2, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle = "#fff";
ctx.fill();
</script>
```
这段代码会在画布上绘制一朵云的外形。你可以根据需要自行调整云朵的大小、位置和颜色等参数。