canvas详解 - 样式篇
canvas详解 - 样式篇
是一个可以使用 js 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。
<style>
#demo {
border: 1px solid #000;
}
style>
<canvas width="150" height="150" id="demo">canvas>
canvas只有两个属性width和height。当没有设置宽度和高度的时候，canvas 会默认宽度为 300 像素和高度为 150 像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲(可以尝试在canvas标签设置 width 和 height 属性)。当开始时没有为 canvas 规定样式规则，其将会完全透明。
例如下图：
为了展示，首先js需要找到渲染上下文，然后在它的上面绘制。 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数，即上下文的类型。
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');
console.log(ctx);
颜色填充
默认的填充颜色都是黑色,下面我们来看看如何设置其他颜色.
fillStyle = color: 设置图形的填充颜色。strokeStyle = color: 设置图形轮廓的颜色。fillRect(): 绘制填充矩形
fillStyle、strokeStyle
一旦设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,10);
ctx.lineTo(20,100);
ctx.stroke();
上面的例子可以看到,即便只是在其中一条线上设置了红色,然后调用beginPath重新起了一个路径列表第二条线条也照样是红色,这时候想改变颜色只能重新设置.
fillStyle同理:
ctx.beginPath();
ctx.fillStyle = "red";
ctx.moveTo(20, 20);
ctx.lineTo(20, 50);
ctx.lineTo(80, 50);
ctx.fill();
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(20, 90);
ctx.lineTo(80, 90);
ctx.fill();
fillRect
fillRect与前两个不同,用于填充一个矩形,是一个方法,接受下面的参数:
x: 矩形起始点的x轴坐标。y: 矩形起始点的y轴坐标。width: 矩形的宽度。height: 矩形的高度。
ctx.fillStyle = 'red';
ctx.fillRect(20, 10, 110, 100);
当然也可以填充整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果，需要让填充的范围和画布的范围相同即可(ctx.fillRect(0, 0, canvas.width, canvas.height);).由于这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 fill() 或者stroke()方法并不会对这个方法有什么影响。
样式
可以通过下面一系列属性来设置线的样式。
lineWidth: 设置线条宽度。lineCap: 设置线条末端样式。lineJoin: 设定线条与线条间接合处的样式。miterLimit: 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
lineWidth
描述线段宽度的数字(Number或者可以通过Number()方法转成Number类型的字符串数字)。(0、负数、 Infinity 和 NaN 会被忽略)
ctx.beginPath();
ctx.lineWidth = '10';
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.stroke();
lineCap
绘制每一条线段末端的属性。有 3 个可能的值，分别是：butt, round 和 square。
butt: 线段末端以方形结束, 默认值是butt。round: 线段末端以圆形结束。square: 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
ctx.beginPath();
ctx.lineWidth = 15;
['butt', 'round', 'square'].forEach((lineCap, i) => {
ctx.lineCap = lineCap;
ctx.beginPath();
ctx.moveTo(25 + i * 50, 10);
ctx.lineTo(25 + i * 50, 140);
ctx.stroke();
});
可以看到绘制了 3 条线段，每条线段都设置了不同的 lineCap 属性值,通过红框可以很明显看到第二条线段使用了 round 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 square 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
lineJoin
用来设置 2 个长度不为 0 的相连部分（线段、圆弧、曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
有 3 个可能的值:
round: 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。bevel: 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。miter: 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过miterLimit属性看到效果。
ctx.beginPath();
ctx.lineWidth = '10';
["round", "bevel", "miter"].forEach((join, i) => {
ctx.lineJoin = join;
ctx.beginPath();
ctx.moveTo(-5, 5 + i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke();
});
miterLimit
用于设置斜接面限制比例.当获取属性值时，会返回当前的值（默认值是10.0 ）。当给属性赋值时，0、负数、 Infinity 和 NaN 都会被忽略；除此之外都会被赋予一个新值。
语法:
ctx.miterLimit = value;
其他方法
getLineDash(): 返回一个包含当前虚线样式，长度为非负偶数的数组。setLineDash(segments): 设置当前虚线样式。lineDashOffset: 设置虚线样式的起始偏移量。