Canvas详细使用方法(二)_民生

创始人

2024-06-02 04:59:02

0次

线型 Line styles

lineCap：属性的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：

在这里插入图片描述



Document

在这里插入图片描述



Document

在这里插入图片描述

canvas 提供了两种方法来渲染文本：

fillText(text, x, y [, maxWidth])
- 在 (x,y) 位置，填充指定的文本
- 绘制的最大宽度（可选）。
strokeText(text, x, y [, maxWidth])
- 在 (x,y) 位置，绘制文本边框
- 绘制的最大宽度（可选）。
  文本的样式（需在绘制文本前调用）
font = value：当前绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是：10px sans-serif。
textAlign = value：文本对齐选项。可选的值包括：start, end, left, right or center. 默认值是 start
textBaseline = value：基线对齐选项。可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。
- 默认值是 alphabetic。



Document

在这里插入图片描述

绘制图片，可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态：

drawImage(image, x, y)
- 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
drawImage(image, x, y, width, height)
- 这个方法多了 2 个参数：width 和 height，这两个参数用来控制当向 canvas 画入时应该缩放的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
- 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

图片的来源，canvas 的 API 可以使用下面这些类型中的一种作为图片的源：

在这里插入图片描述



Document

Canvas绘画状态

是当前绘画时所产生的样式和变形的一个快照。
Canvas在绘画时，会产生相应的绘画状态，其实我们是可以将某些绘画的状态存储在栈中来为以后复用。
Canvas 绘画状态的可以调用 save 和 restore 方法是用来保存和恢复，这两个方法都没有参数，并且它们是成对存在的。
保存和恢复（Canvas）绘画状态
save()：保存画布 (canvas) 的所有绘画状态
restore()：恢复画布 (canvas) 的所有绘画状态
Canvas绘画状态包括：
当前应用的变形（即移动，旋转和缩放）
以及这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit,shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline …
当前的裁切路径（clipping path）



Document

在这里插入图片描述

Canvas和CSS3一样也是支持变形，形变是一种更强大的方法，可以将坐标原点移动到另一点、形变可以对网格进行旋转和缩放。
Canvas的形变有4种方法实现：

translate(x, y)：用来移动 canvas 和它的原点到一个不同的位置。
- x 是左右偏移量，y 是上下偏移量（无需要单位），如右图所示。
rotate(angle)：用于以原点为中心旋转 canvas，即沿着z轴旋转。
- angle是旋转的弧度，是顺时针方向，以弧度为单位。
scale(x, y)：用来增减图形在 canvas 中像素数目，对图形进行缩小或放大。
- x 为水平缩放因子，y 为垂直缩放因子。如果比 1 小，会缩小图形，如果比 1 大会放大图形。默认值为 1，也支持负数。
transform(a, b, c, d, e, f)：允许对变形矩阵直接修改。这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵。
注意事项：
在做变形之前先调用 save 方法保存状态是一个良好的习惯。
大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。
如果在一个循环中做位移但没有保存和恢复canvas状态，很可能到最后会发现有些东西不见了，因为它很可能已超出canvas画布以外了。
形变需要在绘制图形前调用。

translate方法，它用来移动 canvas 和它的原点到一个不同的位置。

在这里插入图片描述



Document

在这里插入图片描述

rotate方法，它用于以原点为中心旋转 canvas，即沿着 z轴旋转。



Document

在这里插入图片描述

**scale方法可以缩放画布。**可用它来增减图形在 canvas 中的像素数目，对图形进行缩小或者放大。

scale(x, y)
- x 为水平缩放因子，y 为垂直缩放因子，也支持负数。
- 如果比 1 小，会缩小图形，如果比 1 大会放大图形。默认值为 1。
  注意事项
画布初始情况下，是以左上角坐标为原点。如果参数为负实数，相当于以 x 或 y 轴作为对称轴镜像反转。
- 例如，使用translate(0, canvas.height); scale(1,-1); 以 y 轴作为对称轴镜像反转。
默认情况下，canvas 的 1 个单位为 1 个像素。如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出
来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
缩放案例实战
第一步：先保存一下Canvas当前的状态，并确定缩放原点
第二步：在绘制图形前缩放画布
第三步：开始绘制图形，并填充颜色

在这里插入图片描述