html5画正方形和半圆
时间: 2023-09-25 16:13:07 浏览: 52
你可以使用HTML5的canvas元素来绘制正方形和半圆。以下是示例代码:
绘制正方形:
```html
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00'; // 设置填充色为红色
ctx.fillRect(50, 50, 100, 100); // 绘制正方形,起点坐标为(50,50),宽高为100
</script>
```
绘制半圆:
```html
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath(); // 开始绘制路径
ctx.arc(100, 100, 50, 0, Math.PI); // 绘制半圆,圆心坐标为(100,100),半径为50,起始角度为0,终止角度为π
ctx.closePath(); // 关闭路径
ctx.fillStyle = '#f00'; // 设置填充色为红色
ctx.fill(); // 填充颜色
</script>
```
以上代码可以在HTML页面中嵌入,运行后即可看到绘制出来的正方形和半圆。