添加绘制圆角矩形的方法,核心代码如下:
/**
* 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>
完成展示。