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>