HTML5 Canvas 画布

在使用  canvas 元素的时候，需要调用 getContext() 方法，目的是得到画布的绘图上下文。通过这个阴影，就可以使用其他的 API 进行绘图操作。

语法

2d ：平面的    ，主要讲解2d。

案例代码

绘制矩形

---

准备好 canvas 之后，就可以创建绘制图形了。

canvas API 提供了多种工具，包括创建图形、颜色、图像、文本等。

canvas API 中的一些方法支持直接在画布上绘制图形。

绘制矩形的方法

-   fillRect( x , y , width , height )

-   strokeRect( x , y , width , height )

-   clearRect( x , y , width , height )

*  fillRect( x , y , width , height )

• 绘制实心矩形。

• x ，y  指的是矩形左上角的位置。

• width，height 表明其尺寸大小。

*  strokeRect( x , y , width , height )

-  绘制空心矩形。

*   clearRect( x , y , width , height )

- 清除属性所指定的区域的像素，类似于擦除器。

案例代码

案例：在画布上扣出小矩形

x:

y:

w:

h:

dig

绘制颜色

---

在创建图形时如果不设定颜色，所有的图形都会使用默认颜色 - 纯黑色。

可以通过以下属性指定绘图颜色：

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

- strokeStyle ：声明形状线条的颜色。

- fillStyle：声明形状内部区域颜色。

- globalAlpha：透明度属性，可以设置画布上图形的透明度。

案例代码

练习：

- 绘制不同位置、不同颜色的矩形。

- 移动矩形

上

左

右

下

渐变

–

canvas 支持的渐变效果包括线性渐变和射线渐变。

canvas 渐变支持设置颜色的转折点。

语法

- createLinearGradient ( x1, y1, x2, y2 ) ：创建线性渐变

- createRadialGradient ( x1, y1, r1, x2, y2, r2 ) ：创建射线渐变

- createColorStop ( position，color ) ：指定渐变颜色

渐变 - 线性渐变

案例代码：

渐变 - 径向渐变 （射线渐变）

案例代码

绘制文字

---

在画布上写文字非常简单，只需要定义一些属性和方法即可。

属性：

- font ：与 css 和 font 的属性类似，接受值也完全相同。

- textAlign ：文本对齐方式，值可以是 left、right 和 center。

- textBaseline：文本基线，值可以是 top（顶部对齐）、hanging（基线对齐）、middle（中部对其）、alphabetic（默认对其方式） 和 bottom（底部对齐）。

方法：

- strokeText（text，x，y）：在位置（x，y）处绘制指定的文字轮廓。

- fillText（text，x，y ）：与上一个方法相似，区别是该方法绘制的是实心的文字。

- measureText（）：返回指定文字大小信息。

案例代码

绘制阴影

---

阴影也是 canvas API 的重要组成部分。

每一条路径和文字都可以创建阴影效果。

API 提供了4个实现阴影的属性：

- shadowColor：阴影的颜色。

- shadowOffsetX：确定阴影的水平投射距离。

- shadowOffsetY：确定阴影的垂直投射距离。

- shadowBlur：模糊效果。

注：　rgba（0,0,0,0.5） // 最后的0.5表示半透明，透明度为0.5。shadowBlur 为羽化程度即模糊度，值越高，羽化程度越高。

案例代码

Canvas 绘制路径

---

针对一些复杂图形的绘制，需要通过路径进行描绘。

路径是画笔移动的地图，路径建立后，将其发送给上下文，就可以绘制图形。

Canvas 绘制路径 - 常用方法

beginPath()

• 开始一个新的形状描。穿件路径前必须先调用该方法。

closePath()

- 关闭路径，用直线将最后一个点与远点相连，如果想要保留开放路径，则不需要调用该方法。

stroke()

- 将路径绘制为轮廓形状。

fill()

- 将路径绘制为实心形状，使用该方法是可以不用 closePath 关闭路径。该方法会通过直线连接最后一个点与第一个点实现封闭。

clip()

• 在上下文中设置剪裁区域。

moveTo( x, y )

-  将笔触移动到指定位置。

lineTo( x, y )

- 绘制一条直线，连接当前笔触位置到指定位置。

rect( x, y, width, height )

• 生成一个矩形路径。

arc( x, y, radius, startAngle, endAngle, direction )

- 在指定位置上生成弧线或圆线，半径和弧度由属性指定。

• direction 是布尔类型，表示顺时针或逆时针。

案例：

画一个 V 字形线条