HTML canvas strokeStyle 属性

在 HTML 中，Canvas 元素是一个可以用 JavaScript 绘制图形、动画和其他视觉效果的矩形区域。其中的 strokeStyle 属性用于设置绘制路径的颜色、渐变或模式。

语法

strokeStyle 属性可以接受以下值：

• 颜色值，例如 "red", "#00FF00", "rgb(255,0,0)"
• 渐变对象，用于创建渐变效果
• 图案对象，用于创建图案填充效果

设置颜色值

可以直接将颜色值赋给 strokeStyle 属性来设置路径的颜色。例如：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'blue';

创建渐变对象

使用 createLinearGradient() 方法或 createRadialGradient() 方法创建渐变对象，然后将其赋给 strokeStyle 属性。例如：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.strokeStyle = gradient;

创建图案对象

使用 createPattern() 方法创建图案对象，然后将其赋给 strokeStyle 属性。例如：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.strokeStyle = pattern;
}

示例

下面是一个简单的示例，展示如何使用 strokeStyle 属性绘制一个矩形并设置不同的颜色：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'red';
ctx.strokeRect(10, 10, 50, 50);

ctx.strokeStyle = 'blue';
ctx.strokeRect(70, 10, 50, 50);
</script>

总结

通过设置 strokeStyle 属性，我们可以轻松地控制绘制路径的颜色、渐变和图案，为 Canvas 元素增添更多视觉效果。希望本文能够帮助你更好地理解和应用 HTML Canvas 中的 strokeStyle 属性。