html5中canvas通过js绘制圆角矩形

最新推荐文章于 2024-04-15 10:32:48 发布
最新推荐文章于 2024-04-15 10:32:48 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： 前端 文章标签： html5 canvas js 圆角 矩形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A123638/article/details/46365293
版权

添加绘制圆角矩形的方法，核心代码如下：

/**
 * 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>

完成展示。

第三眼的思绪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5中的canvas绘制三个矩形
itscassie_的博客
09-14 1688
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;绘制三个矩形&lt;/title&gt;         &lt;style&gt;             body{                 w
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
weixin_29475313的博客
06-04 1935
使用HTML5 canvas绘制一个矩形的方法发布时间：2020-08-29 11:23:12来源：亿速云阅读：102作者：小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一个矩形的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect()方法。我们来看一个具体的例子代...
【Canvas技法】绘制矩形、正方形、切角矩形和圆角矩形
最新发布
一念非凡(46岁待业程序员)
04-15 852
在Html5/Canvas中，绘制矩形、正方形、切角矩形和圆角矩形。
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
01-19
圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。 因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。 JavaScript Code复制内容到剪贴板 <!DOCTYPE html>    <html lang=zh>    <head>        <meta charset=UTF-8>        <title>圆角矩形</title>        <style>            body { background: url(./images/bg3.jp
[转]html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
weixin_33975951的博客
12-08 154
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。一个正常的圆角矩形，我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成线条的能力，很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。 提到钩子，如果你看过我介绍arcTo的文章，那么可能你一下就明白了这种图形就可以用arcTo画出来。我讲...
详述Canvas(五)/绘制圆角矩形
泥猴桃的博客
05-24 1万+
之前做的react 项目 做了一个分享图片功能，分享的图片上有二维码，和个人信息等内容，二维码用的 qrcode.react 组件，但是图片上的元素必须要用canvas 绘制上去，canvas api 好久之前看过，但是基本没用过，忘的也七七八八了，临阵抱佛脚！ 其中用到了一个绘制圆角矩形的 方法，搜索之后找到了这篇文章，写的很不错， 附带原文链接https://blog.csdn.net/l...
canvas圆角矩形/边框/图片
三三
12-16 1095
// 圆角矩形 roundRect(x, y, w, h, r, ctx) { ctx.save() ctx.beginPath() // 左上弧线 ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI) // 左直线 ctx.moveTo(x, y + r) ctx.lineTo(x, y + h - r) // 左下弧线 ctx.arc(x + r, y + h - r, r, 0.
canva绘制圆角矩形
06-11 810
在做组态的时候，需要支持矩形圆角格式，但是因为canvas本身不带有圆角矩形，需要自行算出坐标进行绘制 方案一、统一圆角 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas制作圆角矩形（包括填充矩形的功能）&lt...
JavaScript canvas绘制圆角矩形.html
12-22
Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象...
Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
08-29
在onDraw方法中，我们使用Canvas的drawRoundRect方法来绘制圆角矩形。 在使用BitmapShader时，我们可以使用以下代码： ```java BitmapShader bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode....
详解微信小程序canvas圆角矩形的绘制的方法
10-18
主要介绍了详解微信小程序canvas圆角矩形的绘制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
canvas rotate 累加旋转_前端之canvas学习
weixin_39588209的博客
11-22 474
一、什么是Canvas没有Canvas的年代，绘图只能借助Flash，页面不得不用JavaScript和Flash进行交互，而现在可以直接用Html5的canvas元素使用JavaScript在网页上绘制图形。Canvas指定了尺寸，可以在这个范围内任意绘制。Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图形的方法。二、Canvas的环境由于浏览器对HTML5标准支持不一致，所以通常在的内...
好漂亮的JS圆角矩形
hszdz的专栏
05-06 705
http://www.ajaxwing.com/
canvas制作圆角矩形（包括填充矩形的功能）
徐同保的专栏
09-20 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas制作圆角矩形（包括填充矩形的功能）&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ca
Canvas.arcTo() 的使用，画一条带圆角的线段，画一个思维导图一基础
学习笔记
07-10 1339
这个方法还是比较难理解的。因为它不是直观的绘制路径，而是间接的。它的参数是这样的。它是由两个点和一个圆角半径来确定一条弧线。这么说你肯定是不能明白的，看下面例子。
canvas绘图以及html2-canvas绘图代码
L824627453的博客
12-29 1677
canvas绘图 是运用画笔在画布上一个一个画出元素或者裁剪元素的大小达到头像还有文字海报等效果 html2-canvas 是基于html本身的div（dom）来对网页进行截图并转存为img，可以和它搭配的有image.js（还不会）,关于图片放大模糊的问题，使用0.5.0-beta4版本的html2-canvas.js html2canvas (v0.5.0-beta4) - html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。 | BootCDN - Bootstrap 中文
javascript中string转UTF8格式byte数组
热门推荐
第三眼的思绪
06-17 2万+
在javascript代码中，有些地方我们需要将string转为byte数组再进行进一步处理，网上太少这方面的资料。这里我根据java中String.getByte(“UTF-8”)的实现机制来进行string转byte数组的处理，同时解决中文和非英文字母转byte数组时的编码问题。其代码如下：/** *@description:将string转为UTF-8格式signed char字节数组
canvas 利用js绘制圆角矩形
08-09
要利用js绘制圆角矩形，我们可以使用Canvas标签和它的API来实现。 首先，我们需要获得一个指向Canvas元素的引用，这样我们就可以利用其API进行绘图操作。可以通过JavaScript代码来获取该引用，如下所示： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值