HTML5 canvas基本绘图之绘制曲线

这里需要注意的是arcTo函数绘制的曲线的起始点需要通过moveTo(）函数来设置，下面利用arcTo函数绘制一个圆角矩形：

JavaScript Code复制内容到剪贴板

function createRoundRect(context , x1 , y1 , width , height , radius) {
// 移动到左上角 context.moveTo(x1 + radius , y1);
// 添加一条连接到右上角的线段 context.lineTo(x1 + width - radius, y1);
// 添加一段圆弧 context.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius);
// 添加一条连接到右下角的线段 context.lineTo(x1 + width, y1 + height - radius);
// 添加一段圆弧 context.arcTo(x1 + width, y1 + height , x1 + width - radius, y1 + height , radius);
// 添加一条连接到左下角的线段 context.lineTo(x1 + radius, y1 + height);
// 添加一段圆弧 context.arcTo(x1, y1 + height , x1 , y1 + height - radius , radius);
// 添加一条连接到左上角的线段 context.lineTo(x1 , y1 + radius);
// 添加一段圆弧 context.arcTo(x1 , y1 , x1 + radius , y1 , radius);
2/3 首页上一页 1 2 3 下一页尾页