佳木斯湛栽影视文化发展公司

主頁 > 知識庫 > HTML5 Canvas畫線技巧——實(shí)現(xiàn)繪制一個(gè)像素寬的細(xì)線

HTML5 Canvas畫線技巧——實(shí)現(xiàn)繪制一個(gè)像素寬的細(xì)線

熱門標(biāo)簽:美圖手機(jī) 百度競價(jià)點(diǎn)擊價(jià)格的計(jì)算公式 硅谷的囚徒呼叫中心 阿里云 智能手機(jī) 使用U盤裝系統(tǒng) 檢查注冊表項(xiàng) 網(wǎng)站建設(shè)
正統(tǒng)的HTML5 Canvas中如下代碼

復(fù)制代碼
代碼如下:

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(300,100);
ctx.stroke();

運(yùn)行結(jié)果繪制出來的并不是一個(gè)像素寬度的線

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

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

其實(shí)這個(gè)根本原因在于Canvas的繪制不是從中間開始的

而是從0~1,不是從0.5~1 + 0~0.5的繪制方式,所以

導(dǎo)致fade在邊緣,看上去線很寬。

解決方法有兩個(gè),一個(gè)是錯位覆蓋法,另外一種是中心

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

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

復(fù)制代碼
代碼如下:

/**
* <p> draw one pixel line </p>
* @param fromX
* @param formY
* @param toX
* @param toY
* @param backgroundColor - default is white
* @param vertical - boolean
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) {
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);
} else {
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)是整數(shù),否則HTML5會自動實(shí)現(xiàn)邊緣反鋸齒

又導(dǎo)致你的一個(gè)像素直線看上去變粗了。

運(yùn)行效果:

現(xiàn)在效果怎么樣,這個(gè)就是HTML5 Canvas畫線的一個(gè)小技巧

覺得不錯請頂一下。

標(biāo)簽:懷化 賀州 湖北 煙臺 通遼 湘潭 黃山 山南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5 Canvas畫線技巧——實(shí)現(xiàn)繪制一個(gè)像素寬的細(xì)線》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    息烽县| 山西省| 八宿县| 泗洪县| 黔东| 华亭县| 张家界市| 武夷山市| 万安县| 旬阳县| 益阳市| 台南市| 松溪县| 柘城县| 三都| 永泰县| 永善县| 霍州市| 潢川县| 甘谷县| 昌江| 遵化市| 桓仁| 霍州市| 龙游县| 阳信县| 尤溪县| 卫辉市| 铜陵市| 开化县| 台安县| 新平| 泸水县| 台山市| 龙江县| 渝中区| 明水县| 龙川县| 漾濞| 镇赉县| 嵊泗县|