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

創(chuàng)新互聯(lián)建站是一家專業(yè)提供瀍河企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站制作、網(wǎng)站建設、外貿(mào)網(wǎng)站建設、成都h5網(wǎng)站建設、小程序制作等業(yè)務。10年已為瀍河眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

代碼如下：

ctx.lineWidth = 1;

ctx.beginPath（）;

ctx.moveTo（10，100）;

ctx.lineTo（300,100）;

ctx.stroke（）;

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

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

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

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

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

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

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

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

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

復制代碼

代碼如下：

/ **

*

畫一條像素線

* @param fromX

* @param formY

* @param toX

* @param toY

* @param backgroundColor-默認為白色

* @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;

};

中心平移法代碼如下：

復制代碼

代碼如下：

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會自動實現(xiàn)邊緣反鋸齒

又導致你的一個直線看起來變粗了。

以上就是關于“HTML5怎么實現(xiàn)替換一個預期寬的細線”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。