HTML | 画布 strokeStyle 属性

画布（Canvas）是 HTML5 中新增的绘图功能，它为我们提供了基于 Web 的绘图功能，使得我们可以在网页中绘制出各种图形，达到不同的效果。而 strokeStyle 属性则是画布中非常重要的属性之一。

strokeStyle 属性是什么？

strokeStyle 属性是 CanvasRenderingContext2D 接口中的一个属性，用于设置画笔（线框）的颜色、渐变或者模式。这个属性决定了绘制路径时的颜色、渐变或模式。

strokeStyle 属性的语法

strokeStyle 属性有多种设置方式，主要有以下四种：

1. 通过颜色值来设置画笔颜色：

   context.strokeStyle = "#FF0000";
   

   或者：

   context.strokeStyle = "red";
   

2. 通过渐变对象来设置画笔颜色。例如：

   var grd = context.createLinearGradient(0, 0, 200, 0);
   grd.addColorStop(0, "red");
   grd.addColorStop(1, "white");
   
   context.strokeStyle = grd;
   

3. 通过 pattern 对象来设置画笔颜色。例如：

   var img = new Image();
   img.src = "pattern.png";
   img.onload = function () {
       var pattern = context.createPattern(img, "repeat");
       context.strokeStyle = pattern;
   }
   

4. 继承父层样式。如果没有设置 strokeStyle 属性，则默认的颜色为 currentColor 属性的值，这个值是从它的父层继承来的。

strokeStyle 属性的用途

strokeStyle 属性主要用于绘制线框的颜色。

绘制矩形：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.strokeRect(10, 10, 100, 100);
context.strokeStyle = "red";
context.strokeRect(150, 10, 100, 100);

这个例子首先使用默认颜色绘制一个矩形，然后使用红色画笔重新绘制了一个矩形。

总结

strokeStyle 属性是画布中设置画笔颜色、渐变或模式的非常重要的属性之一。通过设置 strokeStyle 属性，我们可以控制绘制路径时的颜色、渐变或模式。无论是绘制基本图形，还是复杂的图形，只要掌握了 strokeStyle 属性的使用方法，你就可以轻松实现你所需的画布效果了。