canvas lineWidth繪製原理
關於線條寬度繪製原理在canvas 1px畫素模糊現象解決方案一章節中有所涉及。
如果沒有良好掌握canvas繪製線條原理,可能會導致一系列意想不到問題。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas { border: 2px dotted #ccc; margin:50px; } </style> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 20; ctx.moveTo(0, 0); ctx.lineTo(200, 0); ctx.lineTo(200, 200); ctx.lineTo(0, 200); ctx.closePath(); ctx.stroke(); } </script> </head> <body> <canvas id="canvas" width="550" height="450"></canvas> </body> </html>
上面程式碼繪製了一個具有四個邊框的矩形圖案,通過lineWidth設定每一個線條的厚度為20px。
但是繪圖的實際表現卻有些讓人匪夷所思。
程式碼執行效果截圖如下:
是不是對上面繪製的圖形有一些疑問,為什麼左上兩邊只有10px的寬度。
下面通過圖示分析一下出現上述現象的原因。
圖示如下:
當想要繪製從(3,1)到(3,5)的一條直線,那麼這個直線的寬度預設並不會實現第二個圖的效果。
因為寬度會沿著線條寬度的中線(紅線)向兩端擴充套件,根據需求,只要填充深藍色的部分即可,但是計算機並不會這樣。因為它不會只繪製一個畫素單元格的一半,剩餘的的一半也會被填充。
整個區域(淺藍和深藍的部分)會以實際設定顏色一半色調的顏色來填充。
但是如果線條的寬度是偶數,線條同樣會從中線向兩端擴充套件,但是能完整的填滿兩端的畫素,那麼填充顏色會保持不變。第二個網格圖片演示如何實現繪製一畫素直線時候,能夠精準定位和保持填充顏色不變的效果,我們只要從(3.5,1)位置繪製,這樣就能夠完美的填充一個畫素寬度。
程式碼執行怪異出現的原因:
原理介紹完畢,那麼程式碼繪製出現的怪異現象原因也就很明顯了。
[JavaScript] 純文字檢視 複製程式碼ctx.lineWidth = 20 ctx.moveTo(0, 0); ctx.lineTo(200, 0)
從左到右繪製一條橫向長度200px,厚度為20px的線條。
線條的繪製在垂直方位上也是從中線在垂直方位向兩端擴充套件繪製。
圖示如下:
上述程式碼左上邊框之所以顯示是10px,是因為由於從中線開始繪製向兩端擴充套件。
所以有一半的寬度被邊緣給遮擋了,只要調一下繪製就會全部顯示出來。
垂直和水平方位的繪製原理都是想通的。
程式碼修改如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas { border: 2px dotted #ccc; margin:50px; } </style> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 20; ctx.moveTo(20, 20); ctx.lineTo(200, 20); ctx.lineTo(200, 220); ctx.lineTo(20, 220); ctx.closePath(); ctx.stroke(); } </script> </head> <body> <canvas id="canvas" width="550" height="450"></canvas> </body> </html>
上述程式碼只是向右下挪動一下位置,被遮擋的部分邊框就會被顯示出來。
相關文章
- canvas lineWidth 繪製原理Canvas
- canvas 繪製矩形Canvas
- canvas 繪製扇形Canvas
- canvas 繪製文字Canvas
- canvas 繪製線條Canvas
- canvas 繪製圓形Canvas
- canvas繪製流星效果Canvas
- canvas繪製直線Canvas
- canvas lineWidth 屬性Canvas
- Canvas 繪製雷達圖Canvas
- canvas繪製動畫的技巧Canvas動畫
- canvas 繪製立體圓環Canvas
- canvas 繪製文字詳解Canvas
- canvas 繪製圓角矩形Canvas
- canvas 繪製矩形缺角Canvas
- canvas 繪製雙線技巧Canvas
- canvas繪製風車效果Canvas
- canvas繪製笑臉表情Canvas
- canvas繪製太陽系Canvas
- canvas繪製矩形框Canvas
- Canvas 繪製風向動畫Canvas動畫
- canvas 繪製圖案是重疊繪製而不是重置Canvas
- canvas繪製圖案是重疊繪製而不是重置Canvas
- Canvas(3)---繪製餅狀圖Canvas
- canvas系列教程之繪製矩形Canvas
- 用canvas繪製流星夜空Canvas
- 使用canvas繪製圓弧動畫Canvas動畫
- canvas繪製不重合的圓Canvas
- canvas繪製sin正弦曲線Canvas
- 流水賬系列之Canvas繪製-02Canvas
- canvas繪製扇形程式碼例項Canvas
- canvas繪製卡通人臉形象效果Canvas
- canvas繪製圖片drawImage學習Canvas
- canvas繪製星星程式碼例項Canvas
- canvas繪製多個圓圈效果Canvas
- canvas繪製網格射線效果Canvas
- canvas繪製小球漸隱漸現Canvas
- canvas 繪製雞蛋程式碼例項Canvas