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

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

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

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

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

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

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

组件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中调用演示： 
  
 
  
 
  
        	   	
HTML5 Canvas Dash-line Demo - By Gloomy Fish
 	
Dash line and Rounded Rectangle
 	
 		 	
  
 
  转载请注明