<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas制作圆角矩形（包括填充矩形的功能）</title></head><body><canvas id="myCanvas" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>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();}</script></body></html>
