[TOC] ## 顏色 1. `fillStyle = color`設置圖形的填充顏色 2. `strokeStyle = color`設置圖形輪廓的顏色 顏色格式為 `rgb(255,255,255)` 或 `rgba(255,255,255,0.5)` ## Transparency(透明度) `globalAlpha = transparencyValue ` 這個屬性影響到 canvas 里所有圖形的透明度，0.0-1.0 ,0為完全不透明 ## line style 線寬 ``` lineWidth=int_val (>0) ``` ## 線條末端樣式 ``` lineCap = type butt 線段末端以方形結束 round 線段末端以圓形結束 square 線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域 ``` 實例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.beginPath() ctx.moveTo(10,10) ctx.lineTo(10,200) ctx.lineCap="square"//butt,round,square ctx.lineWidth=20 ctx.stroke() } ``` 分別為 "butt","round","square"  ## 線條與線條間接合處的樣式 ``` lineJoin = type round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。 bevel 在相連部分的末端填充一個額外的以三角形為底的區域， 每個部分都有各自獨立的矩形拐角。 miter(默認) 通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區域。 ```  ## 虛線 setLineDash 方法接受一個數組，來指定線段與間隙的交替； lineDashOffset屬性設置起始偏移量。 實例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.setLineDash([20,5]); ctx.lineDashOffset=0 ctx.strokeRect(50,50,200,200) } ```