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绘制圆角矩形的主要内容,如果未能解决你的问题,请参考以下文章

Canvas——绘制圆角矩形之详解

Canvas——绘制圆角矩形之详解

html5 canvas键盘左右移动矩形的问题

在 Angular.js 上的 HTML5 Canvas 中的背景图像上绘制一个矩形

canvas绘制圆角矩形

Android 里canvas 绘制了两个矩形,交叉位置颜色重叠