> 結(jié)論寫在頭

var oC = document.getElementById('c1'); var oGC = oC.getContext('2d');oGC.strokeRect(50,50,100,100);//默認(rèn)繪制黑色一像素的線

像這個用canvas繪制出一個方形的時候，由于設(shè)置的top值和left值是50px，所以canvas會在第50和第51個像素之間從中間開始繪制一像素的線，第50和第51個像素各占0.5像素。

計算機(jī)并不能渲染0.5個像素，所以導(dǎo)致第50和第51個像素都被渲染了，渲染的顏色就成了灰色。（白加黑：背景色加線的顏色）

> 解決辦法

既然會因?yàn)?.5像素的問題而渲染了兩個像素，那么在設(shè)置top值和left值時，增加或減少0.5像素就可以解決了。想繪制在第51個像素就設(shè)置50.5，想繪制在第50個像素就設(shè)置49.5。

另外，值得注意的是，畫出來的方形大小只有99*99像素，要除去一邊線的寬度。

轉(zhuǎn)載于:https://www.cnblogs.com/jacobb/p/6814328.html

總結(jié)

以上是生活随笔為你收集整理的canvas中strokeRect的渲染问题strokeRect把一像素的边框渲染成两像素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。