canvas设置颜色及线条样式

最新推荐文章于 2024-05-27 08:51:51 发布

星星有所不知

最新推荐文章于 2024-05-27 08:51:51 发布

阅读量2.7w

点赞数 8

分类专栏： HTML

本文链接：https://blog.csdn.net/xnn_1993/article/details/88718434

版权

HTML 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

canvas设置颜色及线条样式

- 1. canvas设置颜色
- 2. canvas设置线条样式

1. canvas设置颜色

fillStyle = color; //设置图形的填充颜色
strokeStyle = color; //设置图形轮廓的颜色
color可以是表示css颜色值的字符串，渐变对象或者图案对象，color默认为黑色
globalAlpha = 透明度（0-1）//设置透明度，有效范围（0.0完全透明 - 1.0完全不透明，默认是1.0）

2. canvas设置线条样式

lineWidth。线宽，正值，默认为1.0.起始点和终点的连线为中心，上下各占线宽的一半
lineCap = type; //设置线条样式
type的3个值：
1. butt: 线段末端以方形结束
2. round: 线段末端以圆形结束,但是增加了一个宽高（宽度 = 线段宽度，高度 = 0.5 * 线段宽度）
3. square: 线段末端以方形结束,但是增加了一个宽高（宽度 = 线段宽度，高度 = 0.5 * 线段宽度）
lineJoin = type; //同一个Path内，设置线条与线条接合处的样式（同一个path，故不存在线条宽度不同的情况）
type的3个值：
1. round：填充一个额外的扇形。扇形的圆心为直线相接点，圆角半径为线段的宽度
2. bevel：在相连部分的末端填充一个额外的三角形
3. miter(默认)：延伸相连部分的外边缘，使其相交于一点
虚线
1. setLineDash([实线长度, 间隙长度]); //设置实线长度与间隙长度
2. lineDashOffset; //该属性设置起始偏移量。

<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="800" style="border: solid 1px #24d1ec"></canvas>
    <script>
        function draw() {
            let canvas=document.getElementById('canvas');
            let ctx = canvas.getContext('2d');
            setColorExample(ctx);
            setLineStyle(ctx);
        }

        /*设置颜色*/
        function setColorExample(ctx) {
            setFillStyle(ctx);
            setStrokeStyle(ctx);
        }

        /*设置填充颜色*/
        function setFillStyle(ctx) {
            ctx.globalAlpha = 0.8;
            for (let i = 0; i < 6; i++) {
                for (let j = 0; j < 6; j++) {
                    ctx.fillStyle = `rgb(${Math.floor(42.5 * i)}, ${Math.floor(42.5 * j)}, 0)`;
                    ctx.fillRect(j * 50, i * 50, 50, 50);
                }
            }
        }

        /*设置绘制轮廓颜色*/
        function setStrokeStyle(ctx) {
            let randomInt = () => {
                return parseInt(Math.random() * 255 , 10);
            };

            for (let i = 0; i < 6; i++) {
                for (let j = 0; j < 6; j++) {
                    ctx.strokeStyle = `rgb(${randomInt()}, ${randomInt()}, ${randomInt()})`;
                    ctx.strokeRect(j * 50 + 310, i * 50, 50, 50);
                }
            }
        }

        function setLineStyle(ctx) {
            setLineWidth(ctx);
            setLineCap(ctx);
            setLineJoin(ctx);
            setLineDash(ctx);
        }

        function setLineWidth(ctx) {
            ctx.beginPath();
            ctx.moveTo(10, 350);
            ctx.lineTo(250, 350);
            ctx.lineWidth = 50;
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(10, 350);
            ctx.lineTo(250, 350);
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            ctx.stroke();
        }

        function setLineCap(ctx) {
            ctx.beginPath();
            ctx.moveTo(40, 450);
            ctx.lineTo(40, 550);
            ctx.lineWidth = 50;
            ctx.lineCap = "butt";
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(110, 450);
            ctx.lineTo(110, 550);
            ctx.lineWidth = 50;
            ctx.lineCap = "round";
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(180, 450);
            ctx.lineTo(180, 550);
            ctx.lineWidth = 50;
            ctx.lineCap = "square";
            ctx.stroke();
        }

        function setLineJoin(ctx) {
            ctx.lineWidth = 30;

            ctx.beginPath();
            ctx.moveTo(350, 320);
            ctx.lineTo(450, 420);
            ctx.lineTo(550, 320);
            ctx.lineTo(650, 420);
            ctx.closePath();
            ctx.lineJoin = 'round';
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(350, 430);
            ctx.lineTo(450, 530);
            ctx.lineTo(550, 430);
            ctx.lineTo(650, 530);
            ctx.closePath();
            ctx.lineJoin = 'bevel';
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(350, 550);
            ctx.lineTo(450, 650);
            ctx.lineTo(550, 550);
            ctx.lineTo(650, 650);
            ctx.closePath();
            ctx.lineJoin = 'miter'; // 默认值
            ctx.stroke();
        }

        function setLineDash (ctx) {
            ctx.setLineDash([20,5]);
            ctx.lineDashOffset = 5;
            ctx.lineWidth = 2;
            ctx.strokeRect(620, 10, 200, 200);

            console.log(ctx.getLineDash()); //[20, 5]
        }
        draw();
    </script>
</body>
</html>

星星有所不知

关注

8
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
canvas设置颜色及线条样式

canvas设置颜色及线条样式1. canvas设置颜色2. canvas设置线条样式1. canvas设置颜色fillStyle = color; //设置图形的填充颜色strokeStyle = color; //设置图形轮廓的颜色color可以是表示css颜色值的字符串，渐变对象或者图案对象，color默认为黑色globalAlpha = 透明度（0-1）//设置透明度，有效范围...
复制链接

扫一扫