HTML canvas strokeStyle属性


HTML canvas strokeStyle Property

HTML画布中的strokeStyle属性用于设置笔触的颜色，渐变或图案。 元素允许您使用JavaScript在网页上绘制图形。 每个画布都有两个描述画布高度和宽度的元素，即分别描述高度和宽度。

以下是语法-

1
context.strokeStyle=color|gradient|pattern;

上面的值包括-

  • 颜色？ 工程图的笔触颜色。
  • 梯度？ 线性或径向渐变对象以创建渐变笔触
  • 图案？ 用于创建图案笔触的图案对象。

现在让我们来看一个实现canvas的strokeStyle属性的示例-

例

现场演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="550" height="400" style="border ?2px solid orange;"></canvas>

 var c = document.getElementById("newCanvas");
 var ctx = c.getContext("2d");
 var grad = ctx.createLinearGradient(150, 0, 280, 0);
 grad.addColorStop("0","orange");
 grad.addColorStop("0.5","blue");
 grad.addColorStop("1.0","green");
 ctx.strokeStyle = grad;
 ctx.lineWidth = 20;
 ctx.strokeRect(150, 120, 240, 100);

</body>
</html>

输出量