html5中canvas通过js绘制圆角矩形
Posted 第三眼的思绪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5中canvas通过js绘制圆角矩形相关的知识，希望对你有一定的参考价值。
添加绘制圆角矩形的方法，核心代码如下：
/**
* 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>完成展示。
以上是关于html5中canvas通过js绘制圆角矩形的主要内容，如果未能解决你的问题，请参考以下文章