strokeStyle（路徑樣式屬性）

Created: November-22, 2018

context.strokeStyle=color

設定用於描邊當前路徑輪廓的顏色。

這些是 color 選項（必須引用這些選項）：

一個名為 color 的 CSS ，例如 context.strokeStyle='red'
十六進位制顏色，例如 context.strokeStyle='#FF0000'
RGB 顏色，例如 context.strokeStyle='rgb(red,green,blue)'，其中紅色，綠色和藍色是整數 0-255，表示每種成分顏色的強度。
HSL 顏色，例如 context.strokeStyle='hsl(hue,saturation,lightness)'，其中色調是色輪上的整數 0-360，飽和度和亮度是指示每個組分強度的百分比（0-100％）。
HSLA 顏色，例如 context.strokeStyle='hsl(hue,saturation,lightness,alpha)'，其中色調是色輪上的整數 0-360 並且飽和度和亮度是指示每個分量的強度的百分比（0-100％），並且α是表示不透明度的小數值 0.00-1.00。

你還可以指定這些顏色選項（這些選項是由上下文建立的物件）：

線性漸變，是使用 context.createLinearGradient 建立的線性漸變物件
徑向漸變，是使用 context.createRadialGradient 建立的徑向漸變物件
模式是使用 context.createPattern 建立的模式物件

StackOverflow 文件

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.strokeStyle='red';
    drawLine(50,40,250,40);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(75,75,175,75);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    drawLine(50,75,250,75);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,110,15,100,110,45);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    ctx.lineWidth=20;
    drawLine(50,110,250,110);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.strokeStyle=pattern;
        drawLine(50,150,250,150);
    }
    patternImage.src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png';

    // for demo only, draw labels by each stroke
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',265,40);
    ctx.fillText('Linear Gradient color',265,75);
    ctx.fillText('Radial Gradient color',265,110);
    ctx.fillText('Pattern color',265,150);

    // utility to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=425 height=200></canvas>
</body>
</html>