canvas画圆角矩形
时间: 2023-09-02 12:10:57 浏览: 106
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
可以使用 HTML5 的 Canvas 元素来绘制圆角矩形。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas圆角矩形</title>
<style>
#myCanvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 50; // 矩形左上角x坐标
var y = 50; // 矩形左上角y坐标
var width = 200; // 矩形宽度
var height = 100; // 矩形高度
var cornerRadius = 20; // 圆角半径
ctx.beginPath();
ctx.moveTo(x + cornerRadius, y);
ctx.lineTo(x + width - cornerRadius, y);
ctx.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius);
ctx.lineTo(x + width, y + height - cornerRadius);
ctx.arcTo(
x + width,
y + height,
x + width - corner
阅读全文