canvas制作圆角矩形(包括填充矩形的功能)

您的浏览器不支持 HTML5 canvas 标签。

window.onload = function() {

var myCanvas = document.getElementById("myCanvas"); //获取canvas对象

if (myCanvas.getContext("2d")) { //判断浏览器是否支持canvas标签

//设置canvas的宽度和高度

myCanvas.width = 400;

myCanvas.height = 200;

var context = myCanvas.getContext("2d"); //获取画布context的上下文环境

//绘制一个圆角矩形

strokeRoundRect(context, 10, 10, 100, 50, 10);

//绘制并填充一个圆角矩形

fillRoundRect(context, 200, 10, 100, 50, 10, 'rgba(0,0,0,0.7)');

} else {

alert("您的浏览器不支持canvas，请换个浏览器试试");

}

};

/**该方法用来绘制一个有填充色的圆角矩形

*@param cxt:canvas的上下文环境

*@param x:左上角x轴坐标

*@param y:左上角y轴坐标

*@param width:矩形的宽度

*@param height:矩形的高度

*@param radius:圆的半径

*@param fillColor:填充颜色

**/

function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {

//圆的直径必然要小于矩形的宽高

if (2 * radius > width || 2 * radius > height) { return false; }

cxt.save();

cxt.translate(x, y);

//绘制圆角矩形的各个边

drawRoundRectPath(cxt, width, height, radius);

cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值

cxt.fill();

cxt.restore();

}

/**该方法用来绘制圆角矩形

*@param cxt:canvas的上下文环境

*@param x:左上角x轴坐标

*@param y:左上角y轴坐标

*@param width:矩形的宽度

*@param height:矩形的高度

*@param radius:圆的半径

*@param lineWidth:线条粗细

*@param strokeColor:线条颜色

**/

function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {

//圆的直径必然要小于矩形的宽高

if (2 * radius > width || 2 * radius > height) { return false; }

cxt.save();

cxt.translate(x, y);

//绘制圆角矩形的各个边

drawRoundRectPath(cxt, width, height, radius);

cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2

cxt.strokeStyle = strokeColor || "#000";

cxt.stroke();

cxt.restore();

}

function drawRoundRectPath(cxt, width, height, radius) {

cxt.beginPath(0);

//从右下角顺时针绘制，弧度从0到1/2PI

cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

//矩形下边线

cxt.lineTo(radius, height);

//左下角圆弧，弧度从1/2PI到PI

cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

//矩形左边线

cxt.lineTo(0, radius);

//左上角圆弧，弧度从PI到3/2PI

cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

//上边线

cxt.lineTo(width - radius, 0);

//右上角圆弧

cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

//右边线

cxt.lineTo(width, height - radius);

cxt.closePath();

}