canvas stroke()
stroke方法可以對canvas的路徑進行描邊。
此方法本身應用非常簡單,關鍵在於對路徑的理解。
具體可以參閱canvas路徑與子路徑詳解一章節。
語法結構:
[JavaScript] 純文字檢視 複製程式碼context.stroke();
瀏覽器相容:
(1).IE9+瀏覽器支援此方法。
(2).edge瀏覽器支援此方法。
(3).谷歌瀏覽器支援此方法。
(4).火狐瀏覽器支援此方法。
(5).Opera瀏覽器支援此方法。
(6).Safari瀏覽器支援此方法。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas{ border:1px solid #d3d3d3; width:300px; height:150px; } </style> <script> window.onload=function(){ let c=document.getElementById("ant"); let ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.lineTo(70,100); ctx.strokeStyle="red"; ctx.stroke(); } </script> </head> <body> <canvas id="ant"></canvas> </body> </html>
上述程式碼可以將canvas中的路徑繪製為紅色。
strokeStyle屬性的用法可以參閱canvas strokeStyle一章節。
相關文章
- SVG:理解stroke-dasharray和stroke-dashoffset屬性SVG
- CSS text-strokeCSS
- SVG stroke-dashoffsetSVG
- SVG霓虹燈特效之stroke-dasharray與stroke-dashoffset詳解SVG特效
- CSS3 text-strokeCSSS3
- SVG stroke-dasharray虛線邊框SVG
- Android stroke 邊框線 某一邊Android
- HTML5的畫布:Stroke(筆觸)和Fill(填充)HTML
- canvasCanvas
- [論文速覽] Design and Development of a Framework For Stroke-Based Handwritten Gujarati Font GenerationdevFrameworkJAR
- canvas clearRect()Canvas
- canvas toBlob()Canvas
- canvas toDataURL()Canvas
- canvas fill()Canvas
- canvas fillRect()Canvas
- canvas translate()Canvas
- canvas rotate()Canvas
- canvas scale()Canvas
- canvas fillText()Canvas
- canvas createPattern()Canvas
- canvas createImageData()Canvas
- canvas restore()CanvasREST
- canvas save()Canvas
- canvas putImageData()Canvas
- canvas drawImage()Canvas
- canvas clip()Canvas
- canvas arcTo()Canvas
- canvas isPointInPath()Canvas
- canvas arc()Canvas
- canvas getImageData()Canvas
- canvas fillStyleCanvas
- canvas closePath()Canvas
- canvas beginPath()Canvas
- canvas strokeRect()Canvas
- canvas strokeStyleCanvas
- canvas rect()Canvas
- canvas setTransform()CanvasORM
- canvas(三)Canvas