canvas圆角矩形实心
时间: 2023-10-16 11:09:40 浏览: 160
要在Canvas中绘制一个实心的圆角矩形,可以使用以下步骤:
1. 首先,获取Canvas的上下文对象,例如:
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
```
2. 设置填充颜色和圆角半径:
```javascript
ctx.fillStyle = 'red'; // 设置填充颜色
var cornerRadius = 10; // 设置圆角半径
```
3. 绘制圆角矩形:
```javascript
ctx.beginPath();
ctx.moveTo(x + cornerRadius, y);
ctx.arcTo(x + width, y, x + width, y + height, cornerRadius);
ctx.arcTo(x + width, y + height, x, y + height, cornerRadius);
ctx.arcTo(x, y + height, x, y, cornerRadius);
ctx.arcTo(x, y, x + width, y, cornerRadius);
ctx.closePath();
ctx.fill();
```
请确保将上述代码中的 `x`、`y`、`width` 和 `height` 替换为适当的值,以确定矩形的位置和大小。
通过以上步骤,你就可以在Canvas上绘制一个实心的圆角矩形了。
阅读全文
相关推荐












