添加绘制圆角矩形的方法，核心代码如下：
/*** x 起始X坐标(必须)* y 其实Y坐标(必须)* w 矩形宽度(必须)* h 矩形高度(必须)* r 矩形圆角半径(可选，默认为0)* b 矩形边框宽度(可选，默认为1)* c 矩形边框颜色(可选，默认"#FFF")**/CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r, b, c) {//设置默认圆角半径if(!r){r = 0;}//设置线条宽度if(b){this.lineWidth = b;}else{this.lineWidth = 1;}//设置颜色if(c){this.strokeStyle = c;}else{this.strokeStyle = "#000";}/**由于Canvas画图时边框宽度由理论中心线向两边扩展，为使绘图边框只向外扩展，*逻辑上将矩形高宽相对中心扩大1/2边框宽度*/x -= this.lineWidth / 2;y -= this.lineWidth / 2;w += this.lineWidth;h += this.lineWidth;//当长宽小于2倍半径时，将半径缩小为长宽一般（即画圆）if (h >= w && w < 2 * r){r = w / 2;}else if(w > h && h < 2 * r){r = h / 2;}this.beginPath();this.moveTo(x + w - r, y);this.arcTo(x + w , y, x + w , y + r, r);this.arcTo(x + w, y + h , x + w - r, y + h , r);this.arcTo(x, y + h, x , y + h - r, r);this.arcTo(x, y , x+r, y , r);this.closePath();return this;}
在js代码中对添加的该方法进行调用即可绘制出相应的圆角矩形。
其中js代码如下：
$(function(){/*** x 起始X坐标(必须)* y 其实Y坐标(必须)* w 矩形宽度(必须)* h 矩形高度(必须)* r 矩形圆角半径(可选，默认为0)* b 矩形边框宽度(可选，默认为1)* c 矩形边框颜色(可选，默认"#FFF")**/CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r, b, c) {//设置默认圆角半径if(!r){r = 0;}//设置线条宽度if(b){this.lineWidth = b;}else{this.lineWidth = 1;}//设置颜色if(c){this.strokeStyle = c;}else{this.strokeStyle = "#000";}/**由于Canvas画图时边框宽度由理论中心线向两边扩展，为使绘图边框只向外扩展，*逻辑上将矩形高宽相对中心扩大1/2边框宽度*/x -= this.lineWidth / 2;y -= this.lineWidth / 2;w += this.lineWidth;h += this.lineWidth;//当长宽小于2倍半径时，将半径缩小为长宽一般（即画圆）if (h >= w && w < 2 * r){r = w / 2;}else if(w > h && h < 2 * r){r = h / 2;}this.beginPath();this.moveTo(x + w - r, y);this.arcTo(x + w , y, x + w , y + r, r);this.arcTo(x + w, y + h , x + w - r, y + h , r);this.arcTo(x, y + h, x , y + h - r, r);this.arcTo(x, y , x+r, y , r);this.closePath();return this;}$("#tb input").on('change',function(){var x = 0;var y = 0;var w = 0;var h = 0;var r = 0;var b = 1;var c = "#000";if(/^[+-]?[0-9]*/.test($("#_x").val())){x = parseInt($("#_x").val());}if(/^[+-]?[0-9]*/.test($("#_y").val())){y = parseInt($("#_y").val());}if(/^[0-9]*/.test($("#_w").val())){w = parseInt($("#_w").val());}if(/^[0-9]*/.test($("#_h").val())){h = parseInt($("#_h").val());}if(/^0|([1-9][0-9]*)(\.[0-9]*)?$/.test($("#_r").val())){r = $("#_r").val();}if(/[1-9][0-9]*$/.test($("#_b").val())){b = $("#_b").val();}if(/^\#[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}$/.test($("#_c").val())){c = $("#_c").val();}var canvas = document.getElementById("mycanvas");var ctx = canvas.getContext("2d");ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.roundRect(x,y,w,h,r,b,c).stroke();});$("#mycanvas").mousemove(function(e){$("#m_x").text(e.offsetX);$("#m_y").text(e.offsetY);}).mouseleave(function(){$("#m_x").text("");$("#m_y").text("");});$("#tb input:eq(0)").change();});
html展示页面代码如下：
<html><head><style type="text/css">*{margin: 0px auto;padding: 0px;list-style: none;text-decoration: none;}#main{margin: 0px auto;width: 1000px;}#main > ul{width: 100%;list-style: none;}#main > ul > li{width: 100%;margin: 5px 0px;}#canvas_div{margin: auto;width: 400px;height:400px;border: 1px solid #0f0;}#tb{margin: 10px auto;}#tb input{width: 100%;height: 20px;}</style><script type="text/javascript" src="js/jquery-1.10.2.js"></script><script type="text/javascript" src="js/test.js"></script></head><body><div id="main"><ul><li><table border="1" id="tb"><thead><th width="120">名称</th><th width="200">值</th></thead><tbody><tr><td>起始X坐标</td><td><input id="_x" value="150" /></td></tr><tr><td>起始Y坐标</td><td><input id="_y" value="150" /></td></tr><tr><td>矩形宽度</td><td><input id="_w" value="100" /></td></tr><tr><td>矩形高度</td><td><input id="_h" value="100" /></td></tr><tr><td>圆滑度</td><td><input id="_r" value="5" /></td></tr><tr><td>边框宽度</td><td><input id="_b" value="1" /></td></tr><tr><td>边框颜色</td><td><input id="_c" value="#000"/></td></tr></tbody></table><div id="canvas_div"><canvas id="mycanvas" width="400px"height="400px"></canvas></div><div>鼠标坐标X：<span id="m_x"></span>鼠标坐标Y：<span id="m_y"></span></div></li></ul></div></body></html>
完成展示。
