Canvas 画笔 strokeStyle

在上一章节 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>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.