Canvas 画笔 strokeStyle

2024-03-17 09:44| 来源: 网络整理| 查看: 265

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

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

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

运行结果如下

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

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);

运行结果如下

【本文地址】

公司简介

联系我们