【绘制】HTML5 Canvas 中渐变色和图案（图文、示例）

最新推荐文章于 2025-05-13 06:57:14 发布

原创最新推荐文章于 2025-05-13 06:57:14 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#放射渐变 #线性渐变 #canvas #pattern #gradient

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

59 篇文章

订阅专栏

本教程详细介绍了如何在HTML5 Canvas中使用线性和放射渐变，以及如何应用图案进行图形填充和描边。提供了丰富的代码示例和演示链接，帮助读者理解和掌握Canvas绘图技巧。

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

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

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

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

渐变色

Canvas元素支持线性(linear)和放射(radial)渐变。

方法	描述
CanvasGradient createLinearGradient(double x0, double y0,double x1,double y1)	创建线性渐变。传入该方法的参数表示渐变线的两个端点。
CanvasGradient createRadialGradient(double x0, double y0,double r0,double x1,double y1,double r1)	创建放射渐变。参数代表位于圆锥形渐变区域两端的圆形。

线性渐变

用法

通过调用createLinearGradient()方法创建线性渐变。传入两个点x、y的坐标，代表了渐变方向从x到y。两点连线就是canvas建立颜色渐变效果的依据。调用方法之后，会返回一个CanvasGradient实例，最后将该渐变色设置为fillStyle的值，接下来调用fill()时，便会以此渐变色进行填充，直到填充属性设置为其他值为止。

在创建好渐变色之后，通过CanvasGradient之中唯一方法addColorStop()向渐变色中添加“颜色停止点（color stop）”，传入两个参数：一个是0-1.0之间的double值，代表在渐变色的位置，另一个是DOMString类型的CSS3颜色字串值。

Gradient：渐变色

代码示例

水平渐变

 var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        //更改本行代码可以更改渐变的方向
        gradient = context.createLinearGradient(0,0,canvas.width,0);

    gradient.addColorStop(0, 'blue');
    gradient.addColorStop(0.25, 'white');
    gradient.addColorStop(0.5, 'purple');
    gradient.addColorStop(0.75, 'red');
    gradient.addColorStop(1, 'yellow');

    context.fillStyle=gradient;
    context.rect(0,0,canvas.width,canvas.height);
    context.fill();

效果演示

上图是上述代码的效果图。

如果更改渐变色的方向，只需要更改gradient = context.createLinearGradient();的参数

垂直渐变

gradient = context.createLinearGradient(0,0,0,canvas.height);

斜向渐变

gradient = context.createLinearGradient(0,0,canvas.width,canvas.height);

半渐变

gradient = context.createLinearGradient(0,0,0,canvas.height/2);

注意：渐变色的最后一个颜色填充下半部分。

放射渐变

正如上一小节，线性渐变需要指定一条渐变线。要创建放射渐变，需要指定连个圆形，代表某个圆锥的起止部位。

同样地，仍需要更改那一行代码：

gradient=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);

线性渐变和放射渐变的演示链接

链接内展示的是放射渐变，只需要按照上面描述更改那一行代码即可看到其他的线性渐变的演示

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

图案

说明

除了颜色和渐变色，Canvas元素也允许使用图案来对图形和文本进行描边和填充。

这里的图案可以是：

image元素
canvas元素
video元素

可以用createPattern()方法来创建图案，该方法接收两个参数：图案本身和一个告知浏览器应该如何设定重复图案的字符串：

repeat 全部重复
repeat-x 沿x轴重复
repeat-y 沿y轴重复
no-repeat 不重复

案例

介绍

通过点击四个不同的按钮查看不同的重复效果。

注意：每次点击按钮都需要新创建一个CanvasPattern对象，创建一个新对象是有必要的。因为CanvasPattern对象是Javascript中那种所谓的“不透明对象(opaque object)”，它没有提供用于操作其内容的属性和方法（~~如setPattern~~）。

createPattern()的用法
方法	描述
CanvasPattern createPattern(HTMLImageElement \| HTMLCanvasElement \| HTMLVideoElement image , DOMString repetition)	创建一个可以用在canvas之中对图形和文本进行填充与描边的图案。

演示链接

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

效果图

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图案</title>
    <style>
        #canvas {
            background: #eeeeee;
            border: thin solid cornflowerblue;
        }

        #radios {
            padding: 10px;
        }
    </style>
</head>
<body>
<p>点击不同的按钮查看不同的重复演示</p>
    <div id="radios">
        <input type="radio" id="repeatRadio" name="patternRadio" checked>repeat
        <input type="radio" id="repeatXRadio" name="patternRadio">repeatX
        <input type="radio" id="repeatYRadio" name="patternRadio">repeatY
        <input type="radio" id="noRepeatRadio" name="patternRadio">noRepeat
    </div>
<canvas id="canvas" height="500" width="500"></canvas>
</body>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            repeatRadio = document.getElementById('repeatRadio'),
            repeatXRadio = document.getElementById('repeatXRadio'),
            repeatYRadio = document.getElementById('repeatYRadio'),
            noRepeatRadio = document.getElementById('noRepeatRadio'),
            image = new Image();
        
        //Function……
        
        function fillCanvasWithPattern(repeatString) {
            var pattern = context.createPattern(image,repeatString);
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle=pattern;
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.fill();
        }

        //Event……

        repeatRadio.onclick=function (ev) {
            fillCanvasWithPattern('repeat');
        };
        repeatXRadio.onclick=function (ev) {
            fillCanvasWithPattern('repeat-x');
        };
        repeatYRadio.onclick=function (ev) {
            fillCanvasWithPattern('repeat-y');
        };
        noRepeatRadio.onclick=function (ev) {
            fillCanvasWithPattern('no-repeat');
        };

        //Initialization

        image.src='../images/smalltree.png';
        image.onload=function (ev) {
            fillCanvasWithPattern('repeat');
        }



    </script>
</html>