canvas学习笔记-fillStyle和strokeStyle

最新推荐文章于 2024-06-07 01:10:47 发布

Joyce Lee

最新推荐文章于 2024-06-07 01:10:47 发布

阅读量589

点赞数 18

分类专栏：数据可视化文章标签：学习笔记

本文链接：https://blog.csdn.net/m0_51181022/article/details/139006934

版权

数据可视化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

`fillStyle`示例

在本示例中，用两层for循环来绘制方格阵列，每个方格不同的颜色。结果如下图：

实现效果

在这里插入图片描述

但实现的代码没有那么复杂，用两个变量i和j来为每一个方格产生唯一的RGB色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。也可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，还可以绘制出类似Photoshop里面的那样的调色板。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FillStyle Demo</title>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    function draw() {
        let ctx = document.getElementById("canvas").getContext("2d");
        for (let i = 0; i < 6; i++) {
            for (let j = 0; j < 6; j++) {
                ctx.fillStyle = "rgb(" + Math.floor(255 - 42.5 * i) + "," + Math.floor(255 - 42.5 * j) + ",0)";

                ctx.fillRect(j * 25, i * 25, 25, 25)
            }
        }
    }
    draw()
</script>

</html>

`strokeStyle示例`

这个示例和上面有点类似，但这次用到的是strokeStyle属性，画的不是方格，而是用arc方法来画圆。

实现效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StrokeStyle Demo</title>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    function draw() {
        let ctx = document.getElementById("canvas").getContext("2d");
        for (let i = 0; i < 6; i++) {
            for (let j = 0; j < 6; j++) {
                ctx.strokeStyle = "rgb(0," + Math.floor(255 - 42.5 * i) + "," + Math.floor(255 - 42.5 * j) + ")";

                ctx.beginPath();
                ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
                ctx.stroke();
            }
        }
    }
    draw()
</script>

</html>

相关API

`beginPath()`

新建一条路线，生成之后，图形绘制命令被指向到路径上生成路径。

`closePath()`

闭合路径之后图形绘制命令又重新指向到上下文中。

`stroke()`

通过线条来绘制图形轮廓。

`fill()`

通过填充路径的内容区域生成实心的图行。

`arc(x, y, radius, startAngle, endAngle, anticlockwise)`

画一个以(x, y)为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照acticlockwise给定的方向（默认为顺时针）来生成。

Joyce Lee

关注

18
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas学习笔记-fillStyle和strokeStyle

用两个变量`i`和`j`来为每一个方格产生唯一的`RGB`色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。也可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，还可以绘制出类似Photoshop里面的那样的调色板。
复制链接

扫一扫