如何为Canvas画布上的图形着色？JavaScript绘图颜色API

通过fillStyle和strokeStyle设置Canvas图形的填充与描边色，支持纯色、线性渐变、径向渐变及图案；颜色属性可接受CSS格式字符串、CanvasGradient或CanvasPattern对象，影响后续绘制操作直至重新赋值；线性渐变用createLinearGradient定义方向并添加颜色节点，径向渐变用createRadialGradient模拟光照效果，图案通过createPattern重复图像实现，需确保图像加载完成；合理运用这些方法可实现丰富视觉效果，关键在于掌握颜色设置时机、作用范围及坐标系统细节。

为Canvas画布上的图形着色，主要通过设置绘图上下文的颜色属性来实现。JavaScript提供了多种方式控制填充色和描边色，包括纯色、渐变、图案等。

设置填充色和描边色

在Canvas中，使用fillStyle设置图形内部的填充颜色，使用strokeStyle设置边框线条的颜色。这两个属性接受字符串、CanvasGradient或CanvasPattern对象。

• 支持CSS颜色格式：如 "red"、"#ff0000"、"rgb(255,0,0)"、"hsl(0,100%,50%)"
• 设置后会影响后续所有绘制操作，直到重新赋值
• 示例：ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 100, 100); 绘制一个蓝色矩形

创建线性渐变

使用createLinearGradient(x1, y1, x2, y2)方法生成线性渐变。参数定义渐变的起始点和结束点坐标。

• 通过addColorStop(offset, color)添加颜色节点，offset是0到1之间的数值
• 适合背景、按钮等需要平滑过渡效果的场景
• 示例：从左到右的红黄渐变 const grad = ctx.createLinearGradient(0,0,200,0); grad.addColorStop(0,"red"); grad.addColorStop(1,"yellow"); ctx.fillStyle = grad;

创建径向渐变和图案

径向渐变用createRadialGradient(x1,y1,r1,x2,y2,r2)，定义两个圆（起始和结束），常用于模拟光照或圆形扩散效果。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

20

查看详情

立即学习“Java免费学习笔记（深入）”；

• 图案通过createPattern(image, repetition)生成，repetition可选 "repeat"、"repeat-x"、"repeat-y" 或 "no-repeat"
• 图像源可以是img元素、canvas或video
• 注意：图片需确保已加载完成再使用，否则图案可能为空

基本上就这些。掌握fillStyle和strokeStyle的基本用法，结合渐变与图案，就能实现丰富的视觉效果。关键是理解颜色值的设置时机和作用范围。不复杂但容易忽略细节，比如坐标系统和颜色停点的顺序。

以上就是如何为Canvas画布上的图形着色？JavaScript绘图颜色API的详细内容，更多请关注php中文网其它相关文章！