《JS原理、方法与实践》- canvas作图（三）- 修改颜色和
2020-10-18 本文已影响0人
张中华
颜色和样式是通过strokeStyle和fillStyle两个属性修改的，它们的默认值都是black，strokeStyle表示画线（描边）用的样式，fillStyle表示填充用的样式，它们可以被赋予三种类型的值：纯色、渐变和模式。
纯色
纯色有以下三种赋值方法：
- 直接赋予颜色值，包括赋予十六进制和颜色的单词，例如#323232、red等
- 使用rgb函数赋值，rgb函数有三个十进制（0~255）的参数，分别表示红、绿、蓝的值
- 使用rgba函数赋值，rgba函数在rgb函数的基础上添加了透明度（alpha），它用第四个参数表示透明度。透明度的取值范围为【0，1】，其中，0表示完全透明，1表示完全不透明。
示例：
<body>
<canvas id='c2d'>浏览器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.rect(0,0,20,20);
ctx.fill();
ctx.fillStyle = "rgb(249,27,27)";
ctx.beginPath();
ctx.rect(20,20,20,20);
ctx.fill();
ctx.fillStyle = "rgb(249,27,27, 0.5)";
ctx.beginPath();
ctx.rect(40,40,20,20);
ctx.fill();
}
</script>
</body>
渐变
渐变的颜色是通过CanvasGradient对象来表示的，它可以使用下面两个方法来创建：
- createLinearGradient(x0,y0,x1,y1): 创建线性渐变
- createRadialGradient(x0,y0,x1,y1,r1): 创建径向渐变，也就是散渐变
CanvasGradient对象包含一个addColorStop方法，用来添加渐变的颜色控制点，语法如下：
addColorStop(offset,color)
offset用于设置控制点，取值范围【0，1】；color用于设置控制点的颜色。
示例：
<body>
<canvas id='c2d'>浏览器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
let lineGradient = ctx.createLinearGradient(20,20,100,150);
lineGradient.addColorStop(0, 'red');
lineGradient.addColorStop(0.5, 'rgba(255,255,0,0.7)');
lineGradient.addColorStop(1, '#ff6d00');
ctx.fillStyle = lineGradient;
ctx.beginPath();
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();
let radiaGradient = ctx.createRadialGradient(130,50,10,130,50,30);
radiaGradient.addColorStop(0,'rgba(255,204,205,0.3)');
radiaGradient.addColorStop(0.5,'#ffff00');
radiaGradient.addColorStop(1,'#ff6d00');
ctx.fillStyle = radiaGradient;
ctx.fillRect(100,20,60,60);
}
</script>
</body>
模式
模式使用CanvasPattern对象来表示的，它使用createPattern方法来创建，语法如下：
createPattern(image,repetition);
参数中，image为CanvasImageSource类型，它可以是html中的img节点、video节点、canvas节点或者CanvasRenderingContext2D对象。repetion为重复方式，它可以取下面4个值：
- repeat： 水平和竖直两个方向重复
- repeat-x: 水平重复
- repeat-y: 竖直重复
- no-repeat: 不重复
模式的用法就好像使用图片作为画笔绘图，其中repetition属性跟css中的background-repeat属性类似。
示例：
<body>
<canvas id='c2d'>浏览器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function () {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 400, 400);
};
}
</script>
</body>
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！
听说 👉 点赞 👈 的人运气不会太差，每一天都会元气满满哦 嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦！
