canvas 描邊與填充
繪圖的方式通常有兩種,描邊和填充;下面分別通過程式碼例項對此做一下介紹。
一.描邊:
所謂的描邊,就是為路徑繪製出邊緣線條。
使用stroke()方法即可實現描邊功能,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.rect(20, 20, 150, 100); ctx.stroke(); } </script> </head> <body> <canvas id="canvas" width="300" height="150"></canvas> </body> </html>
預設條件下,描邊的寬度是1px,黑色,當然這一切都是可以自定義的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 170, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); ctx.strokeStyle = gradient; ctx.lineWidth = 5; ctx.rect(20, 20, 150, 100); ctx.stroke(); } </script> </head> <body> <canvas id="canvas" width="300" height="150"></canvas> </body> </html>
上面的程式碼將矩形的描邊樣式設定為線性漸變,寬度為5px。
相關閱讀:
(1).strokeStyle屬性參閱canvas strokeStyle一章節。
(2).lineWidth屬性參閱canvas lineWidth一章節。
(3).rect()方法參閱canvas rect()一章節。
二.填充:
所謂填充就是用指定顏色或者圖案來填充路徑包裹的區域。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.lineTo(200, 200); ctx.lineTo(100, 200); ctx.lineTo(100, 100); ctx.fillStyle = "green"; ctx.fill(); } </script> </head> <body> <canvas id="canvas" width="400" height="300"></canvas> </body> </html>
上面的程式碼實現了對路徑的填充功能,填充顏色為綠色。
如果一個路徑沒有閉合,會不會被填充呢,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.lineTo(200, 200); ctx.lineTo(100, 200); ctx.fillStyle = "green"; ctx.strokeStyle = "red"; ctx.stroke(); ctx.fill(); } </script> </head> <body> <canvas id="canvas" width="400" height="300"></canvas> </body> </html>
沒有閉合的路徑也是可以填充的,但是沒有閉合的部分沒有描邊。
再來看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.moveTo(200, 200); ctx.lineTo(200, 200); ctx.lineTo(100, 200); ctx.fillStyle = "green"; ctx.strokeStyle = "red"; ctx.stroke(); ctx.fill(); } </script> </head> <body> <canvas id="canvas" width="400" height="300"></canvas> </body> </html>
上面的程式碼無法進行填充,因為中間路徑斷開了,必須“一筆”下來的路徑可以填充。
相關文章
- canvas 填充覆蓋描邊Canvas
- canvas描邊和填充介紹Canvas
- SVG 文字填充和描邊SVG
- canvas strokeText() 文字描邊Canvas
- SVG 填充、描邊和透明度設定SVG
- 短視訊系統原始碼,如何給button控制元件新增描邊、填充背景和描邊原始碼控制元件
- canvas fillText() 文字填充Canvas
- canvas fillText() 填充文字Canvas
- canvas填充樣式Canvas
- 4連通域邊界填充演算法和8連通域邊界填充演算法C++演算法C++
- 使用CustomForwardRendererData做描邊效果Forward
- canvas繪製圓形框效果不填充內部Canvas
- 圖形處理:給 Canvas 文字填充線性漸變Canvas
- canvas繪製矩形並填充顏色程式碼例項Canvas
- css實現圖片背景填充的正六邊形CSS
- android下不規則多邊形填充點陣圖Android
- CSS語法手冊(四)文字填充,邊框,邊界和位置屬性(二)(轉)CSS
- CSS語法手冊(三)文字填充,邊框,邊界和位置屬性(一)(轉)CSS
- 去除input焦點描邊程式碼例項
- SVG描邊透明度簡單介紹SVG
- Unity URP 描邊 用RenderPassFeature實現Unity
- CSS和SVG實現文字漸變、描邊、投影CSSSVG
- 設計初學者必學之AI圖形描邊:寬度工具與畫筆工具AI
- canvas實現的多邊形程式碼例項Canvas
- Esfog_UnityShader教程_遮擋描邊(原理篇)Unity
- Winform窗體圓角以及描邊完美解決方案ORM
- CSS3文字的描邊鏤空效果CSSS3
- html canvas 與小丑 。HTMLCanvas
- 雙效合一的SVG多色描邊變形動畫SVG動畫
- Canvas與Image互轉Canvas
- Nmap掃描原理與用法
- delete 與全表掃描delete
- 京東掃描平臺EOS—JS掃描落地與實踐JS
- [Web翻譯]JavaScript中的編譯與填充WebJavaScript編譯
- SVG與Canvas的主要特性SVGCanvas
- canvas 路徑與子路徑Canvas
- oracle 全表掃描,索引範圍掃描與塊的理解Oracle索引
- AE指令碼-形狀圖層描邊屬性控制工具 FX StrokeSetter指令碼