HTML5简明教程-1.1.2.HTML5Canvas参考手册之笔触strokeStyle-优快云博客

本文链接：https://blog.youkuaiyun.com/tomorrow13210073213/article/details/42233751

本文详细介绍了HTML5 Canvas中strokeStyle属性的使用方法，包括如何设置笔触颜色、渐变及图案，通过实例演示了不同设置下图形边框的绘制效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天介绍canvas的另一个重要属性strokeStyle，strokeStyle属性定义了我们在canvas画布上进行图形绘制时的“笔触”，简单点说，就是定义了我们的画笔样式。另外，strokeStyle仅仅定义笔触样式，不能定义填充样式，填充样式需要用fillStyle定义，fillStyle属性在另一篇博文中有详细介绍（http://blog.youkuaiyun.com/tomorrow13210073213/article/details/42169229）。

属性名：strokeStyle

属性描述：strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

属性默认值：#000000

属性值：颜色值、渐变或模式

js语法：context.strokeStyle=color|gradient|pattern;

属性值注解：color：指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。

gradient：用于填充绘图的渐变对象（线性或放射性）

pattern：用于创建 pattern 笔触的 pattern 对象

属性值示例：

（1）渐变。下面我们用渐变笔触绘制了一句：“Merry Christmas”。

    //设置绘制文字大小及字体
    cC.font = "30px Verdana";
    //定义线性渐变
    var lg = cC.createLinearGradient(0, 0, 200, 0);
    lg.addColorStop("0", "magenta");
    lg.addColorStop("0.5", "blue");
    lg.addColorStop("1.0", "red");
    //将渐变设定为笔触
    cC.strokeStyle = lg;
    //设定绘制文字
    cC.strokeText("Merry Christmas", 0, 50);

（2）颜色。颜色值可以是定义颜色的单词（如：red）、具体颜色值（如：#000000）或者rgba颜色（如：rgba(0,0,255,0.8)）

    //用颜色值设置笔触并绘制矩形线框
    cC.strokeStyle = '#3f3f42';
    cC.strokeRect(10, 70, 50, 50);

    //用rgba颜色设置笔触并绘制矩形线框
    cC.strokeStyle = 'rgba(0,0,255,0.8)';
    cC.strokeRect(70, 70, 50, 50);

（3）模式。模式指用createPattern()方法所定义的模式对象。

    //获得img对象
    var img = document.getElementById('img');
    //图片加载完成后进行绘制操作
    img.onload = function() {
        //创建patten对象
        var p = cC.createPattern(img, 'repeat');
        //将patten对象设置为笔触
        cC.strokeStyle = p;
        //绘制矩形线框
        cC.strokeRect(10, 140, 100, 100);
    };

下面是我用于测试的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Html5 Canvas strokeStyle</title>
</head>

<body>
    <canvas id="can" width="500" height="300"></canvas>
    原图：
    <img src="3.jpg" alt="原图" id="img">
</body>
<script type="text/javascript">
    //获得页面元素
    var c = document.getElementById('can');
    //调用html5相关方法获得2D对象
    var cC = c.getContext('2d');

    //用颜色值设置笔触并绘制矩形线框
    cC.strokeStyle = '#3f3f42';
    cC.strokeRect(10, 70, 50, 50);

    //用rgba颜色设置笔触并绘制矩形线框
    cC.strokeStyle = 'rgba(0,0,255,0.8)';
    cC.strokeRect(70, 70, 50, 50);

    //设置绘制文字大小及字体
    cC.font = "30px Verdana";
    //定义线性渐变
    var lg = cC.createLinearGradient(0, 0, 200, 0);
    lg.addColorStop("0", "magenta");
    lg.addColorStop("0.5", "blue");
    lg.addColorStop("1.0", "red");
    //将渐变设定为笔触
    cC.strokeStyle = lg;
    //设定绘制文字
    cC.strokeText("Merry Christmas", 0, 50);

    //获得img对象
    var img = document.getElementById('img');
    //图片加载完成后进行绘制操作
    img.onload = function() {
        //创建patten对象
        var p = cC.createPattern(img, 'repeat');
        //将patten对象设置为笔触
        cC.strokeStyle = p;
        //绘制矩形线框
        cC.strokeRect(10, 140, 100, 100);
    };
</script>

</html>

下面是测试效果图：