二、初识Canvas---修改颜色和线宽

修改样式之修改颜色：

十六进制码/单词/rgba 都可以 写在想要修改的上方

1.context.fillStyle= “颜色值”—修改背景颜色

//绘制矩形
//context.fillRect(x坐标,y坐标,宽度,高度)
//fillStyle实现填充效果
context.fillStyle = "green";
context.fillRect(50, 40, 100, 100);
context.fillStyle = "rgba(255,0,0)";
context.fillRect(175, 40, 100, 100);
context.fillStyle = "#ccc";
context.fillRect(300, 40, 100, 100);

2.context.strokeStyle= “颜色值”—修改边框颜色

//绘制边框
context.strokeStyle = "green"
context.strokeRect(50, 40, 100, 100);
context.strokeRect(175, 40, 100, 100);
context.strokeStyle = "#ccc";
context.strokeRect(300, 40, 100, 100);

            //修改直线颜色
            context.strokeStyle = "green"
            context.beginPath(); //开始路径
            context.moveTo(40,40); //设置路径原点
            context.lineTo(340,40); //设置路径终点
            context.closePath(); //结束路径
            context.stroke(); //绘出路径轮廓
            //修改斜线颜色
            context.strokeStyle = "rgba(255,0,0)";
            context.beginPath(); //开始路径
            context.moveTo(40,40); //设置路径原点
            context.lineTo(340,340); //设置路径终点
            context.closePath(); //结束路径
            context.stroke(); //绘出路径轮廓

修改样式之修改线宽

canvas有一个办法可以增加线宽，即2D渲染上下文的lineWidth属性。
lineWidth属性的默认值为1，但是可以将它修改为任意值。

			//修改直线宽度
            context.lineWidth = 10; //加粗线条
            
            context.strokeStyle = "green" //绿色线
            context.beginPath(); //开始路径
            context.moveTo(40,40); //设置路径原点
            context.lineTo(340,40); //设置路径终点
            context.closePath(); //结束路径
            context.stroke(); //绘出路径轮廓
            
            //修改斜线宽度
            context.lineWidth = 20; //进一步加粗线条
            
            context.strokeStyle = "rgba(255,0,0)"; //红色线
            context.beginPath(); //开始路径
            context.moveTo(40,40); //设置路径原点
            context.lineTo(340,340); //设置路径终点
            context.closePath(); //结束路径
            context.stroke(); //绘出路径轮廓

			//加粗矩形边框
            context.lineWidth = 10; //加粗矩形边框
            context.strokeStyle = "green"
            context.strokeRect(50, 40, 100, 100);

            context.lineWidth = 20; //加粗矩形边框
            context.strokeStyle = "rgba(255,0,0)";
            context.strokeRect(175, 40, 100, 100);

            context.lineWidth = 30; //加粗矩形边框
            context.strokeStyle = "#ccc";
            context.strokeRect(300, 40, 100, 100);

本文地址：https://blog.csdn.net/weixin_48851118/article/details/108177660