我要评论初识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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论