资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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://www.cdkjz.cn/article/pjisio.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220