1. 程式人生 > 其它 >canvas繪製虛線setLineDash

canvas繪製虛線setLineDash

技術標籤:canvascanvas

window.onload=function(){
			
			ctx.beginPath();
	    	ctx.setLineDash([]);//設定實線與空白的大小
	 		ctx.moveTo(50,100);
       		ctx.lineTo(250,100);
       		ctx.stroke();
       		
       		ctx.beginPath();
	    	ctx.setLineDash([4]);//設定實線與空白的大小
	 		ctx.moveTo(50,120);
       		ctx.lineTo(250,120);
       		ctx.stroke();
       		
       		ctx.beginPath();
	    	ctx.setLineDash([4,2]);//設定實線與空白的大小
	 		ctx.moveTo(50,140);
       		ctx.lineTo(250,140);
       		ctx.stroke();
       		
       		ctx.beginPath();
	    	ctx.setLineDash([10,3,1]);//設定實線與空白的大小
	 		ctx.moveTo(50,160);
       		ctx.lineTo(250,160);
       		ctx.stroke();
       		
       		ctx.beginPath();
	    	ctx.setLineDash([10,3,3,3,3]);//設定實線與空白的大小
	 		ctx.moveTo(50,180);
       		ctx.lineTo(250,180);
       		ctx.stroke();
		}