CanvasRenderingContext2D
.strokeStyle
是 Canvas 2D API 描述画笔(绘制图形)颜色或者样式的属性。默认值是 #000
(black)。
参见 Canvas Tutorial 中的 Applying styles and color 章节。
语法
ctx.strokeStyle = color; ctx.strokeStyle = gradient; ctx.strokeStyle = pattern;
选项
color
DOMString
字符串,可以转换成 CSS<color>
值。gradient
CanvasGradient
对象(线性渐变或放射性渐变)。pattern
CanvasPattern
对象(可重复的图片)。
示例
使用 strokeStyle
属性设置不同的颜色
这是一段简单的代码片段,使用 strokeStyle
属性设置不同的颜色。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "blue"; ctx.strokeRect(10, 10, 100, 100);
修改下面的代码并在线查看 canvas 的变化:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = "blue"; ctx.strokeRect(10, 10, 100, 100);</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
strokeStyle
例子
这个例子使用 strokeStyle 属性改变图形轮廓线的颜色。
我们使用 arc()
绘制圆形来代替正方形。
var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')'; ctx.beginPath(); ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); ctx.stroke(); } }
<canvas id="canvas" width="150" height="150"></canvas>
结果如下显示:
Screenshot | Live sample |
---|---|
规范描述
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.strokeStyle |
Living Standard |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
WebKit/Blink-specific 注解
- 在基于 WebKit- 和 Blink- 的浏览器中,除了此属性外,还实现了一个不标准的并且不赞成使用的方法
ctx.setStrokeColor()
。setStrokeColor(color, optional alpha); setStrokeColor(grayLevel, optional alpha); setStrokeColor(r, g, b, a); setStrokeColor(c, m, y, k, a);