HTML5Canvas自定义圆角矩形与虚线(RoundedRectangleandDashLine)

HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line)

创新互联是一家专注于网站建设、网站制作与策划设计,海曙网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:海曙等地区。海曙做网站价格咨询:13518219792

实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何绘制虚线

以及控制虚线间隔大小,学会绘制圆角矩形的技巧。

HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能,但是

通过JavaScript语言的Object.prototype可以实现对对象CanvasRenderingContext2D添

加这两个函数功能。代码的演示效果如下:

HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)


组件fishcomponent.js的代码如下:

CanvasRenderingContext2D.prototype.roundRect = 	function(x, y, width, height, radius, fill, stroke) { 		if (typeof stroke == "undefined") { 			stroke = true; 		} 		if (typeof radius === "undefined") { 			radius = 5; 		} 		this.beginPath(); 		this.moveTo(x + radius, y); 		this.lineTo(x + width - radius, y); 		this.quadraticCurveTo(x + width, y, x + width, y + radius); 		this.lineTo(x + width, y + height - radius); 		this.quadraticCurveTo(x + width, y + height, x + width - radius, y+ height); 		this.lineTo(x + radius, y + height); 		this.quadraticCurveTo(x, y + height, x, y + height - radius); 		this.lineTo(x, y + radius); 		this.quadraticCurveTo(x, y, x + radius, y); 		this.closePath(); 		if (stroke) { 			this.stroke(); 		} 		if (fill) { 			this.fill(); 		} };  CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) { 	// default interval distance -> 5px 	if (typeof pattern === "undefined") { 		pattern = 5; 	}  	// calculate the delta x and delta y 	var dx = (toX - fromX); 	var dy = (toY - fromY); 	var distance = Math.floor(Math.sqrt(dx*dx + dy*dy)); 	var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern); 	var deltay = (dy/distance) * pattern; 	var deltax = (dx/distance) * pattern; 	 	// draw dash line 	this.beginPath(); 	for(var dl=0; dlHTML中调用演示:

     Canvas Rounded Rectangle Demo   	   	

HTML5 Canvas Dash-line Demo - By Gloomy Fish

Dash line and Rounded Rectangle
转载请注明


当前名称:HTML5Canvas自定义圆角矩形与虚线(RoundedRectangleandDashLine)
文章路径:http://bzwzjz.com/article/pjisio.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 响应式网站建设 成都网站制作 网站设计 成都网站设计 成都网站制作 重庆网站制作 定制网站建设 响应式网站设计 成都网站建设推广 网站建设开发 温江网站设计 商城网站建设 成都模版网站建设 重庆网站建设 手机网站制作 网站设计制作 专业网站设计 成都营销网站建设 成都网站建设 手机网站建设套餐 公司网站建设 成都商城网站建设