HTML5 Canvas畫線技巧－實作繪製一個像素寬的細線_html5教學技巧

正統的HTML5 Canvas中如下程式碼

複製程式碼

程式碼如下:

程式碼如下:


ct lineWidth = 1;
ctx.beginPath();

ctx.moveTo(10, 100);
ctx.lineTo(300,100);
ctx.stroke();

運行結果繪製出來的並不是一個像素寬度的線


感覺怎麼好粗啊，跟常常見到的網頁版各種繪製線效果

很不一樣，難道HTML5 Canvas就沒想到搞好點嘛

其實這個根本原因在於Canvas的繪製不是從中間開始的

而是從0～1，不是從0.5～1 0 ～0.5的繪製方式，所以

導致fade在邊緣，看起來線很寬。

解法有兩個，一個是錯位覆蓋法，另一個是中心

平移(0.5,0.5)。實現代碼如下：

錯位覆蓋法我已經包裝成一個原始context的函數

複製代碼

程式碼如下:


/**
*

畫一條像素線

* @param fromX
* @param formY
* @param toX
* @param toY
* @param backgroundoror - 預設為白色
* @param Vertical - 布林值
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundor, verver) { cur = this.strokeStyle;
this.beginPath();
this.moveTo(fromX, fromY);
this.lineTo(toX, toY);
this.closePath();
this.lineWidth=2;
this.stroke();
this.beginPath();
if(vertical) {
this.moveTo(fromX 1, fromY);
this. lineTo(toX 1, toY);
} else {
this.moveTo(fromX, fromY 1);
this.lineTo(toX, toY 1);
}
this.closePath ();
this.lineWidth=2;
this.strokeStyle=backgroundColor;
this.stroke();

this.strokeStyle = currentStrokeStyle;
};

中心平移法代碼如下：

複製代碼

代碼如下:



代碼如下:



代碼如下:

代碼如下:


ctx.save(); ctx.translate(0.5,0.5);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100); ctx.lineTo(300,100); ctx.stroke(); ctx.restore(); 要特別注意確保你所有的座標點都是整數，否則HTML5會自動實現邊緣反鋸齒又導致你的一個像素直線看起來變粗了。 運行效果：現在效果怎麼樣，這個就是HTML5 Canvas畫線的一個小技巧 覺得不錯請頂一下。