Cavas线性渐变

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

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

0 ·

CC 4.0 BY-SA版权

Canvas 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>Canvas</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }
        #myCanvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<!--
这里要注意：canvas的宽高只能在标签上设置，如何在样式里设置，
会导致cavas画布上，形状的比例扭曲变形
-->

<script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');

    // 创建一个渐变
    var grd = ctx.createLinearGradient(200, 200, 350, 200);
    // ctx.createLinearGradient(x,y, x2,y2)
    // 这个函数的参数由两对坐标组成，分别是渐变的起始点和结束点
    // 需要注意的是，这两对坐标的值需要与填充矩形的左上角坐标和右上角坐标保持一致
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "blue");
    // addColorStop 用来添加渐变颜色节点
    // 它有两个参数，
    // 第一个参数范围是0-1
    // 第二个参数是颜色值

    ctx.fillStyle = grd; // 用渐变填充矩形
    ctx.fillRect(200, 200, 150, 75);
</script>
</body>
</html>