HTML5怎么實(shí)現(xiàn)替換一個預(yù)期寬的細(xì)線

這篇“HTML5怎么實(shí)現(xiàn)替換一個預(yù)期寬的細(xì)線”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5怎么實(shí)現(xiàn)替換一個預(yù)期寬的細(xì)線”文章吧。

代碼如下：

ctx.lineWidth = 1;

ctx.beginPath（）;

ctx.moveTo（10，100）;

ctx.lineTo（300,100）;

ctx.stroke（）;

運(yùn)行結(jié)果呈現(xiàn)出來的并不是一個預(yù)期寬度的線

感覺怎么好粗啊，跟常常見到的網(wǎng)頁版各種替換線效果

很不一樣，難道HTML5 Canvas就沒想到搞好點(diǎn)嘛

其實(shí)這個根本原因在于Canvas的而不是從中間開始的替代從0?1，不是從0.5?1

+ 0?0.5的布局方式，所以

導(dǎo)致fade在邊緣，看起來線很寬。

解決方法有兩個，一個是錯位覆蓋法，，另外一種是中心

平移（0.5,0.5）。實(shí)現(xiàn)代碼如下：

錯位覆蓋法我已經(jīng)包裝成一個原始context的函數(shù)

復(fù)制代碼

代碼如下：

/ **

* <p>畫一條像素線</ p>

* @param fromX

* @param formY

* @param toX

* @param toY

* @param backgroundColor-默認(rèn)為白色

* @param vertical-boolean

* /

CanvasRenderingContext2D.prototype .onePixelLineTo =函數(shù)（fromX，fromY，toX，toY，backgroundColor，垂直）{

var currentStrokeStyle = 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）;

} 別的 {

this.moveTo（fromX，fromY + 1）;

this.lineTo（toX，toY + 1）;

}

this.closePath（）;

this.lineWidth = 2;

this.strokeStyle = backgroundColor;

this.stroke（）;

this.strokeStyle = currentStrokeStyle;

};

中心平移法代碼如下：

復(fù)制代碼

代碼如下：

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（）;

要特別注意確保自己的所有坐標(biāo)點(diǎn)是整體，否則HTML5會自動實(shí)現(xiàn)邊緣反鋸齒

又導(dǎo)致你的一個直線看起來變粗了。

以上就是關(guān)于“HTML5怎么實(shí)現(xiàn)替換一個預(yù)期寬的細(xì)線”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。