Canvas 画笔 strokeStyle - Canvas 基础教程

在上一章节 Canvas 绘制矩形我们学习了如何在 canvas 上绘制一个矩形

但我们绘画的都是一个灰黑色的矩形，能否向现实生活中那么多姿多彩呢？比如用不同的画笔画不同的颜色

canvas 的设计者们肯定也考虑到了这一点，于是提供了 ctx.strokeStyle 属性用来定制画笔的颜色

strokeStyle 属性

ctx.strokeStyle 属性用于设置画笔(绘制图形)颜色或者样式

默认值是黑色 #000 (black)

语法

ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;

值	说明
color	一个字符串颜色值，可以是任意的 CSS 颜色值，比如 `red` 、`#000` 等
gradient	一个渐变，是一个 `CanvasGradient` 对象 ( 线性渐变或放射性渐变)，我们后面会讲
pattern	一个绘画对象，是一个 CanvasPattern 对象 ( 可重复的图片)，可以是一张图片，或者另一个画布

例如下面这些颜色都是 橙色

ctx.strokeStyle = "orange";
ctx.strokeStyle = "#FFA500";
ctx.strokeStyle = "rgb(255,165,0)";
ctx.strokeStyle = "rgba(255,165,0,1)"

例如我们要绘制一个绿色边框的矩形，可以这么做

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(50,50,200,50);
</script>

运行结果如下

strokeStyle 一旦设置就会成为接下来的默认画笔，除非再次调用设置为其它的值

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-2" width="400" height="300">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(0,0,200,200);
ctx.strokeRect(0,0,100,100);
ctx.strokeStyle = "red";
ctx.strokeRect(50,50,100,100);
ctx.strokeStyle = "#00ff00";
ctx.strokeRect(250,250,100,100);
</script>

运行结果如下