canvas系列教程之填充颜色

最新推荐文章于 2025-05-09 06:10:00 发布
转载 最新推荐文章于 2025-05-09 06:10:00 发布 · 7.4k 阅读 · 7 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5c8e181a51882545931754bb
文章标签：

#java #python #javascript #ViewUI

这篇博客介绍了HTML5 Canvas中填充颜色的基本方法，包括基本颜色填充和渐变填充，如线性渐变、径向渐变，并通过实例展示了如何使用fillStyle属性和不同方法设置颜色和渐变。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。

填充颜色主要分为两种：

  1. 基本颜色

  2. 渐变颜色（又分为线性渐变与径向渐变）

我们一个个来看。

填充基本颜色

Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如:

context.fillStyle = "red";

下面是出自 HTML4 规范的可用颜色字符串值列表，共十六个。由于 HTML5 没有修改专属的颜色，HTML4 的颜色都可以在 HTML5 中正确显示。

名称名称字符串十六进制数字字符串
黑色（掘金不让写emm）#000000
绿色Green#008000
银色Silver#C0C0C0

（好吧，写表格太烦了，我就不列举了 懒····）

所有这些颜色值都可以应用到 strokeStyle 属性和 fillStyle 属性中。

好了，我来总结一下填充基本色的方法：（也可用于strokeStyle属性）

（1） 使用颜色字符串填充。

context.fillStyle = "red";

context.fillStyle = "#FF0000";

（3）使用十六进制数字字符串简写形式填充。

context.fillStyle = "#F00";

（4）使用rgb()方法设置颜色。

context.fillStyle = "rgb(255,0,0)";

（5）使用rgba()方法设置颜色。

context.fillStyle = "rgba(255,0,0,1)";

此方法最后一个参数传递的是alpha值，透明度范围为1（不透明）~0（透明）。

（6）使用hsl()方法设置颜色。

context.fillStyle = "hsl(0,100%,50%)";

HSL即是代表色相（H），饱和度（S），明度（L）三个通道的颜色。

（7）使用hsla()方法设置颜色。

context.fillStyle = "hsla(0,100%,50%,1)";

以上7句代码都是填充"#FF0000"这个红色。

填充渐变形状

在画布上创建渐变填充有两个基本选项：线性或径向。线性渐变创建一个水平、垂直或者对角线的填充图案。径向渐变自中心点创建一个放射状填充。填充渐变形状分为三步：添加渐变线，为渐变线添加关键色，应用渐变。下面是它们的一些示例。

线性渐变

三步走战略：

  1. 添加渐变线：

var grd = context.createLinearGradient(xstart,ystart,xend,yend);

  1. 为渐变线添加关键色(类似于颜色断点)：

grd.addColorStop(stop,color);

  1. 这里的stop传递的是 0 ~ 1 的浮点数，代表断点到(xstart,ystart)的距离占整个渐变色长度是比例。
应用渐变：
context.fillStyle = grd;
context.strokeStyle = grd;
复制代码

写个代码来看看。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>填充线性渐变</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.rect(200,100,400,400);

        //添加渐变线
        var grd = context.createLinearGradient(200,300,600,300);

        //添加颜色断点
        grd.addColorStop(0,"black");
        grd.addColorStop(0.5,"white");
        grd.addColorStop(1,"black");

        //应用渐变
        context.fillStyle = grd;

        context.fill();

    }
</script>
</body>
</html>
复制代码

运行结果：

我觉得有必要做一个图解，方便大家一次性理解渐变。
为了方便理解，建议把渐变线看成是一个有向线段。如果熟悉PS等绘图工具，用过其中的渐变色设置，应该会很好理解。

这里渐变线的起点和终点不一定要在图像内，颜色断点的位置也是一样的。但是如果图像的范围大于渐变线，那么在渐变线范围之外，就会自动填充离端点最近的断点的颜色。

这里配合两个补充函数再举一例。

绘制矩形的快捷方法

fillRect(x,y,width,height)、strokeRect(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>填充线性渐变</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        //添加渐变线
        var grd = context.createLinearGradient(100,300,700,300);

        //添加颜色断点
        grd.addColorStop(0,"olive");
        grd.addColorStop(0.25,"maroon");
        grd.addColorStop(0.5,"aqua");
        grd.addColorStop(0.75,"fuchsia");
        grd.addColorStop(0.25,"teal");

        //应用渐变
        context.fillStyle = grd;
        context.strokeStyle = grd;

        context.strokeRect(200,50,300,50);
        context.strokeRect(200,100,150,50);
        context.strokeRect(200,150,450,50);

        context.fillRect(200,300,300,50);
        context.fillRect(200,350,150,50);
        context.fillRect(200,400,450,50);

        context.fillRect(0,550,800,25);

    }
</script>
</body>
</html>

复制代码

运行结果：

这两个页面都是水平渐变，但是要清楚线性渐变不一定是水平的，方向可以是任意的，通过渐变线的端点来设置方向。

径向渐变

同样是三步走战略，只不过是第一步的所用方法变了。

  1. 添加渐变圆：

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

  1. 为渐变线添加关键色(类似于颜色断点)：

grd.addColorStop(stop,color);

  1. 应用渐变：
context.fillStyle = grd;
context.strokeStyle = grd;
复制代码

线性渐变是基于两个端点定义的，但是径向渐变是基于两个圆定义的。

我们把示例7-2改写一下。


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>填充径向渐变</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        //添加渐变线
        var grd = context.createRadialGradient(400,300,100,400,300,200);

        //添加颜色断点
        grd.addColorStop(0,"olive");
        grd.addColorStop(0.25,"maroon");
        grd.addColorStop(0.5,"aqua");
        grd.addColorStop(0.75,"fuchsia");
        grd.addColorStop(1,"teal");

        //应用渐变
        context.fillStyle = grd;

        context.fillRect(100,100,600,400);


    }
</script>
</body>
</html>
复制代码

运行结果：

怎么感觉这个颜色搭配那么的……算了，这个就叫做艺术。

createRadialGradient(x0,y0,r0,x1,y1,r1);方法规定了径向渐变开始和结束的范围，即两圆之间的渐变。

总结一下，这节课我们学习了fillStyle、createLinearGradient()、createRadialGradient()、addColorStop()、fillRect()、strokeRect()等属性和方法，详细介绍了填充基本色、线性渐变、径向渐变。

好了，现在学会了上色，那么尽情的使用色彩，绘制出属于我们自己的艺术品吧！?

HTML5 Canvas 入门教程与精彩案例全解析
weimengen的博客
11-01 501
本文聚焦 HTML5 的canvas元素，涵盖其创建、获取上下文、绘制基本图形、设置样式和绘制图像等用法。并通过动态烟花秀、旋转图形之舞、波浪动画之美三个精彩案例，展示canvas强大的绘图与动画能力，助力读者深入掌握其用法。
Canvas 第二章 填充颜色
涛涛的博客
10-03 419
第二章 填充颜色 填充颜色 <canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); canvas.fillStyle="#e4532a"; canvas.strokeStyle="blue"; can
Canvas 使用纯色填充图片
qq_36154972的博客
12-14 1228
我们在 Canvas 中绘制我们的图片图标时经常会遇到需要更改颜色的情况。本文将讲述一种方法。
Canvas基础篇：图形色彩fillStyle与strokeStyle
最新发布
wuhen_n的博客
05-09 1239
本文介绍了如何在Canvas中使用 fillStyle 和 strokeStyle 为图形设置颜色样式。fillStyle 用于填充图形内部的颜色，而 strokeStyle 用于绘制图形的边框颜色。
说说在 Canvas 中如何填充形状基本颜色
读万卷书，行万里路
10-05 4742
Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。 （1）颜色字符串名称 context.fillStyle = "red"; context.fillRect(100, 100, 100, 100); 运行结果： 注意：HTML 4.0 只支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yello
canvas(画线填充颜色)
weixin_45019566的博客
09-13 2243
canvas let canvas = document.getElementById('canvas');// 获取html上的canvas元素 canvas.width // 设置canvas宽度 canvas.height // 设置canvas高度 let content = canvas.getContext('2d'); // 获取上下文 content.stroke(); // 画线 content.fill(); //填充颜色 实现代码： <script>
使用 HTML Canvas 即时填色
滴水成河，汇流成海
06-04 978
使用 HTML Canvas 构建网站或应用程序时，通常需要支持填充。也就是说，当用户选择一种颜色并单击一个像素时，用用户选择的颜色填充与所单击像素的颜色相匹配的所有周围像素。
Delphi Canvas 填充 区域 图形
10-01
// 设置Canvas填充颜色 Canvas.FillColor := clRed; // 填充心形 Canvas.Polygon(HeartShape); end; ``` 这段代码将绘制一个60x60的蓝色矩形，并在其中填充一个红色的心形。 标签"delphi 填充 框"强调了Canvas...
canvas基础教程
08-10
2D渲染上下文提供了一系列的方法和属性，用于在Canvas上绘制图形。例如，`fillRect()`用于填充矩形，`strokeRect()`描边矩形，`beginPath()`和`closePath()`用于开始和结束路径，`moveTo()`和`lineTo()`定义路径中的...
HTML5 Canvas基础教程源代码
04-30
一旦有了渲染上下文，我们就可以使用一系列的方法进行绘图，例如`fillRect()`用于填充矩形，`strokeRect()`描边矩形，`beginPath()`开始一个新的路径，`moveTo()`和`lineTo()`定义线条路径，`fill()`或`stroke()`...
HTML5 Canvas基础教程
01-30
8. **渐变与模式**：Canvas支持线性渐变（`createLinearGradient()`）和径向渐变（`createRadialGradient()`），以及图案模式（`createPattern()`）以创建复杂的填充效果。 9. **混合模式**：`...
如何利用canvas画一个圆，并且填充颜色
热门推荐
Jacgu的博客
05-27 2万+
如何利用canvas画一个圆，并且填充颜色（小白专用，大佬勿看） canvas基础 相信在此之前，你对canvas已经有一定的了解了，接下来我将介绍，如何利用canvas画一个圆。 1、新建一个html模板，我用的编辑环境是Visual Studio Code： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
画布（canvas）效果之-填充色, 笔划色, 颜色值
yaly200的博客
09-19 1545
示例 <!DOCTYPE HTML> <html> <head> <title>填充色, 笔划色, 颜色值</title> </head> <body> <canvas id="can...
Canvas基础: fillStyle和strokeStyle示例
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-16 2374
这些属性不仅提供了基本的图形绘制功能，还可以与多种技术结合使用，以创建复杂和吸引人的视觉效果。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。属性决定了图形内部的颜色。在这篇文章中，我们将深入探讨这两个属性的使用方法，并通过多个示例来展示它们的实际应用场景。方法来创建一个重复的图案纹理，并将其设置为填充色。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，在这个示例中，我们绘制了一个红色填充蓝色描边的圆形。
<canvas>学习笔记——如何给图形填充颜色
jiulan1996的博客
05-05 2万+
var canvas=document.getElementById("canvas"); var contex=canvas.getContext("2d"); 例如，我们要给一个三角形填上颜色，首先我们用绘制直线的API定义一个三角形： contex.moveTo(100,100); contex.lineTo(700,700);  contex.lineTo(100,700);
学习笔记——使用canvas给图形填色
layuecr的博客
09-19 4432
看到canvas的章节，想到可以用它来画个图。然后选了幅由简单线条组成的卡通火箭图，准备动手画。画的过程中遇到了些问题，这里整理一下。下面是找来的图：         没上色前，还感觉不出什么问题。就是使用lineTo画直线，quadraticCurveTo画曲线。附个没上色的图：         到上色了，就遇到问题了：一个颜色怎么覆盖到另外一个颜色上面去？
canvas画矩形带圆角并填充不同的背景色
xy19950125的博客
09-24 3444
用canvas画矩形很容易 但是如果让你画带有圆角的就有点头疼了 更变态的就是根据不的条件 分别给出不同的背景 背景就算了吧 还要填充渐变色下面先看看效果图吧 我就没有拿项目里面来说 因为里面太复杂了 就单独抽出一个小demo 这是在微信小程序里面用的 注意事项：一定要加上 不然的话 会颜色覆盖 反正我就踩到这个坑里一个多小时 ctx.beginPath(); onLoad: function (options) { let ctx = wx.create...
canvas ----背景填充
weixin_41069726的博客
04-21 4727
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值