设置canvas圆角
时间: 2023-10-15 20:07:10 浏览: 49
要设置canvas圆角,可以使用绘制圆角矩形的方法。根据引用中提供的代码,可以使用以下代码来绘制圆角矩形:
```javascript
function roundRectColor(context, x, y, w, h, r) {
context.save();
context.setFillStyle("#CA493A");
context.setStrokeStyle('#CA493A');
context.setLineJoin('round'); //交点设置成圆角
context.setLineWidth(r);
context.beginPath();
context.moveTo(x + r, y);
context.arcTo(x + w, y, x + w, y + h, r);
context.arcTo(x + w, y + h, x, y + h, r);
context.arcTo(x, y + h, x, y, r);
context.arcTo(x, y, x + w, y, r);
context.closePath();
context.fill();
context.stroke();
context.restore();
}
const cas = document.getElementsByTagName('canvas')[0];
const ctx = cas.getContext("2d");
const x = 50; // 圆角矩形的左上角横坐标
const y = 50; // 圆角矩形的左上角纵坐标
const width = 200; // 圆角矩形的宽度
const height = 100; // 圆角矩形的高度
const radius = 20; // 圆角的半径
roundRectColor(ctx, x, y, width, height, radius);
```
以上代码中,`roundRectColor`函数用于绘制圆角矩形,需要传入上下文对象`context`、左上角坐标`(x, y)`、宽度`w`、高度`h`和圆角的半径`r`。然后通过调用`roundRectColor(ctx, x, y, width, height, radius)`来绘制圆角矩形。在绘制圆角矩形后,你还可以使用其他绘图方法来添加文字或其他元素到canvas中。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [H5 canvas 画圆 画圆角](https://blog.csdn.net/weixin_45696837/article/details/120923909)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *3* [canvas 圆角矩形,背景圆角矩形](https://blog.csdn.net/abc_26zm/article/details/108203353)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]