HTML canvas strokeStyle 属性
示例
画一个矩形。 使用红色笔触颜色：
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.strokeStyle = "#FF0000"; ctx.strokeRect(20, 20, 150, 100); </script>
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#FF0000";
ctx.strokeRect(20, 20, 150, 100);
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 Property |
|
|
|
|
|
|---|---|---|---|---|---|
| strokeStyle | Yes | 9.0 | Yes | Yes | Yes |
定义和用法
strokeStyle 属性设置或返回用于笔触的颜色、渐变或图案。
| 默认值: | #000000 |
|---|---|
| JavaScript 语法: | context.strokeStyle=color|gradient|pattern; |
属性值
| 值 Value | 描述 Description |
|---|---|
| color | 一个 CSS 颜色值，表示绘图的笔触颜色。 默认值为 #000000 |
| gradient | 用于创建渐变描边的渐变对象（linear 或 radial） |
| pattern | 用于创建图案描边的 pattern 对象 |
更多示例
画一个矩形。 使用渐变笔触：
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 170, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); // 填充渐变 ctx.strokeStyle = gradient; ctx.lineWidth = 5; ctx.strokeRect(20, 20, 150, 100); </script>
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5" ,"blue");
gradient.addColorStop("1.0", "red");
// 填充渐变
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);
用渐变笔划写下文本 HTML Tutorial!：
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Verdana"; // 创建渐变 var gradient = ctx.createLinearGradient(0, 0, c.width, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); // 填充渐变 ctx.strokeStyle = gradient; ctx.strokeText("HTML Tutorial!", 10, 50); </script>
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Verdana";
// 创建渐变
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 填充渐变
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 50);