【绘制】HTML5 Canvas 中颜色与透明度（图文、示例）

最新推荐文章于 2024-06-16 19:25:55 发布

苏一恒

最新推荐文章于 2024-06-16 19:25:55 发布

阅读量5.1k

点赞数

分类专栏： Canvas系列教程(从入门到精通)【详细解读】文章标签：透明度颜色 Canvas strokeStyle fillStyle

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/100080538

版权

Canvas系列教程(从入门到精通)【详细解读】专栏收录该内容

59 篇文章

订阅专栏

本文深入探讨Canvas中颜色和透明度的设置方法，通过实例展示如何使用strokeStyle与fillStyle属性，以及globalAlpha属性来调整图形的色彩与透明度。文章提供了详细的代码示例，包括如何创建不同透明度的矩形。

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

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

核心属性

Canvas实际应用中，颜色和透明度可以通过strokeStyle与fillStyle属性来设置。

可以用globalAlpha指定全局的透明度。

strokeStyle和fillStyle的属性值可以是任意有效的CSS颜色字串，在http://dev.w3.org/csswg/css3-color找到完整规范。

指定CSS颜色字串的方式：

RGB(red/green/blue,红/绿/蓝)
RGBA(red/green/blue/alpha,红/绿/蓝/透明度)
HSL(hue/saturation/lightness,色相/饱和度/亮度)
HSLA(hue/saturation/lightness/alpha,色相/饱和度/亮度/透明度)
十六进制RGB标注法
颜色名称(eg:"yellow","black"……)

小技巧：你的浏览器可能并不支持全部的SVG1.0标准的颜色名称，因为工作组并不要求所有的CSS3实现程序都支持所有的属性或数值，所以就不包括全部颜色名称了。

提示：HSL颜色值

增加HSL支持的原因是RGB有两个缺陷：

它以硬件为导向。这种描述颜色的形式，是基于“阴极射线管”
它不直观。

演示链接

https://827652549.github.io/Canvas/Unit2/ColorAndOpaque.html

效果图

左边goldenrod颜色的矩形框是不透明的，右边的蓝色矩形框是半透明的。

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色与不透明度</title>
</head>
<body>
<canvas id="canvas" width="700" height="500" style="border: thin solid black"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    context.lineJoin = 'round';
    context.lineWidth = 30;

    context.font = '24px Helvetica';
    context.fillText('点击任何处以擦除', 175, 200);

    context.strokeStyle = 'goldenrod';
    context.fillStyle = 'rgba(0,0,255,0.5)';

    context.strokeRect(75, 100, 200, 200);
    context.fillRect(325, 100, 200, 200);

    context.canvas.onmousedown = function (ev) {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
</script>
</html>