HTML5怎么實現替換一個預期寬的細線

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

代碼如下：

ctx.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的函數

復制代碼

代碼如下：

/ **

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

* @param fromX

* @param formY

* @param toX

* @param toY

* @param backgroundColor-默認為白色

* @param vertical-boolean

* /

CanvasRenderingContext2D.prototype .onePixelLineTo =函數（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會自動實現邊緣反鋸齒

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

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