canvas strokeStyle
此屬性可以設定或者返回描邊的樣式,可以類比CSS設定邊框的樣式。
很多程式碼演示僅介紹了顏色作為strokeStyle屬性的值。
其實此屬性功能比較強大,漸變物件或者模式物件也可以作為它的屬性值。
strokeStyle 預設屬性值為 #000000。
語法結構:
[JavaScript] 純文字檢視 複製程式碼context.strokeStyle=color|gradient|pattern;
引數解析:
(1).color:設定描邊的顏色,預設值為#000000。
(2).gradient:將描邊設定為漸變,一個漸變物件。
(3).pattern:將描邊設定為模式,一個模式物件。
瀏覽器相容:
(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> <script> window.onload=function(){ let canvas=document.getElementById("ant"); let ctx=canvas.getContext("2d"); ctx.lineWidth=5; ctx.strokeRect(20,20,100,40); } </script> </head> <body> <canvas id="ant">瀏覽器不支援canvas</canvas> </body> </html>
程式碼執行效果截圖如下:
如果不顯示設定strokeStyles屬性,它的預設值為#000000。
所以矩形的描邊顏色為黑色。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ let canvas=document.getElementById("ant"); let ctx=canvas.getContext("2d"); ctx.strokeStyle="red"; ctx.lineWidth=5; ctx.strokeRect(20,20,100,40); } </script> </head> <body> <canvas id="ant">瀏覽器不支援canvas</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(){ let canvas=document.getElementById("ant"); let ctx=canvas.getContext("2d"); let 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.strokeRect(20,20,100,40); } </script> </head> <body> <canvas id="ant">瀏覽器不支援canvas</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(){ let canvas=document.getElementById("ant"); let ctx=canvas.getContext("2d"); let gradient=ctx.createLinearGradient(0,0,170,0); let img=document.getElementById("lamp") let pat=ctx.createPattern(img,"repeat"); ctx.strokeStyle=pat; ctx.lineWidth=20; ctx.strokeRect(20,20,100,40); } </script> </head> <body> <canvas id="ant">瀏覽器不支援canvas</canvas> <img src="demo/js/img/lamp.jpg" id="lamp"> </body> </html>
程式碼執行效果截圖如下:
表現效果好比是為描邊設定背景圖片。
strokeStyle屬性值是一個CanvasPattern物件。
關於此物件可以參閱canvas createPattern()一章節。
相關文章
- canvasCanvas
- canvas clearRect()Canvas
- canvas toBlob()Canvas
- canvas toDataURL()Canvas
- canvas stroke()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 rect()Canvas
- canvas setTransform()CanvasORM
- canvas(三)Canvas
- 初探canvasCanvas
- Canvas 教程Canvas
- canvas transform()CanvasORM
- canvas apiCanvasAPI
- react canvasReactCanvas
- canvas translateCanvas
- One simple way to draw canvas, wxml2canvasCanvasXML
- WPF C# create canvas and draw ellipse in canvasC#Canvas
- Canvas&Paint 知識梳理(1) Canvas 基礎CanvasAI