学习简单又不简单的 canvas

Posted 2021-06-29 瓜皮男孩

Canvas 简介

再开始学习 Canvas 前，我们先来了解一下 Flash

Flash 在网页中的应用

Flash 被广泛应用于游戏、网络视频、网站广告、交互设计等

Flash 的问题

• Flash 文件必须有 Flash 播放器才能打开（包括各大浏览器，视频播放器），且播放器的 版本须不低于 Flash 程序自带播放器的版本。
• 2012 年 8 月 15 日，Flash 退出 android 平台，正式告别移动端。
• 2017 年 7 月 25 日，Adobe Systems公司宣布，计划在 2020 年底逐步淘汰 Flash 播放 器插件。
• Flash 正在不断淡出人们的视线。

Canvas 的概念

html5 中新增的 <canvas> ，是一个可以使用脚本(通常为 javascript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行 实时视频处理和渲染。

Canvas 的优势

• 无须安装任何插件，Canvas 是集成在浏览器中的。
• Canvas 开发有自己的一套 API，通过 JavaScript 和 html5 的 <canvas> 标签实现。
• 随着各个浏览器对 JavaScript 引擎的优化，尤其是 Chrome 的 V8，Canvas 运行的效率 上有了极大的提高。
• Canvas 可以运行在越来越重要的移动平台上。

Canvas 基本用法

<canvas> 元素

• <canvas> 标签是 HTML5 新增的一个双标签。
• 兼容问题：IE9 以下及低版本浏览器不支持。
• 处理方式：在双标签内部添加提示语。

<canvas width="800" height="600" id="myCanvas" >
    对不起，你的浏览器不支持画布，请升级浏览器
</canvas>

<canvas> 标签属性

• width：画布的宽度
• height: 画布的高度
• id：标签的 id 属性，用于 JS 获取元素
• 注意：width、height 属性虽然可以设置在 CSS 中，但是会出现变形和扭曲的现象，所以 如果想固定画布的宽高，直接设置在标签属性中。

JavaScript 渲染上下文

canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成

JavaScript 绘制步骤

• 通过 id 属性获取 canvas 元素
• 通过 canvas 元素的 getContext 方法获取上下文 context，图像将在上下文进行渲染，类似 PS 中的新建一个画布
• Canvas API 主要聚焦于 2D 图形，所以获取 2d 上下文
• 后期的绘制工作都是在 ctx 上下文进行的

Canvas 常见绘制方法

坐标和栅格

• 栅格：canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中 的 1 像素。
• 坐标：栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

笔触和填充

• Canvas 中的任何形状都是由这两个部分组成的。
• 笔触：也叫描边。

名称	方法	作用
笔触（描边）	ctx.stroke()	通过线条来绘制图形轮廓，不会自动闭合路径
填充	ctx.fill()	通过填充路径的内容区域生成实心的图形，会自动闭合路径

图形的样式

Canvas 中绘制的路径，可以自定义颜色、描边宽度等样式设置

属性	属性值	作用
ctx.lineWidth	数字	设置描边的宽度为几像素
ctx.fillStyle	颜色值	设置填充颜色
ctx.strokeStyle	颜色值	设置描边颜色

绘制路径

• Canvas 中可以通过对应的方法绘制任意形状的路径。
• 路径绘制后，必须进行描边或填充才能在屏幕中显示。
• 路径的绘制需要多个方法配合完成。

方法	作用
ctx.beginPath()	新建一个路径的实例
ctx.closePath()	闭合路径
ctx.moveTo(x, y)	设置起始位置，将笔触移动到指定的坐标 x 以及 y 上。也可以绘制不连续的路径
ctx.lineTo(x,y)	绘制一条从当前位置到指定 x 以及 y 位置的直线

绘制矩形

绘制矩形的路径时，可以进行化简操作

方法	作用	参数
ctx.fillRect(x, y, width, height)	绘制一个填充的矩形	x：绘制的水平起始位置；y：绘制的垂直起始位置；width：矩形的宽度；height：矩形的高度
ctx.strokeRect(x, y, width, height)	绘制一个矩形的边框	同上
ctx.clearRect(x, y, width, height)	清除指定矩形区域，让清除部分 完全透明。 一般用于清屏。	同上

绘制弧和圆形

• 绘制弧形或者圆形，我们使用 arc() 方法。
• 弧的制作属于路径，必须先 beginPath(),弧或圆形必须进行描边或填充才能进行显示。

方法	作用	参数
ctx.arc(x, y, r, start, end, anticlockwise)	绘制一个弧或圆形的路径	x：圆心的水平位置 y：圆心的垂直位置 r：圆的半径 start：圆起始的角度（弧度） end：圆结束的角度（弧度） anticlockwise：设置绘制的方向，布 尔值，默认为false顺时针，true表示 逆时针方向

注意

• ctx.arc() 函数中表示角的单位是弧度，不是角度。
• 角度与弧度的 JS 表达式: 弧度 = (Math.PI / 180) * 角度。
• 1 弧度 ≈ 57°
• 特殊的角度，例如：
  • 180° = Math.PI 弧度
  • 360° = Math.PI * 2 弧度

绘制文本

Canvas 中绘制的文字，也可以设置文字的相关样式

方法和属性	作用	参数
ctx.fillText(text, x, y [, maxWidth])	在指定位置填充文字	text：绘制的文字内容 x：绘制的水平起始位置 y：绘制的垂直起始位置 maxWidth：可选，绘制的最大宽度
ctx.strokeText(text, x, y [, maxWidth])	在指定位置绘制文字边框	同上
ctx.font	设置字体属性	属性值：”字号 字体”
ctx.textAlign	设置文本对齐属性	属 性 值：start,end,left,right，center 默认值是 start

Canvas 中的变形

变形

• Canvas 中变形是一种强大的方法，可以将原点移动到另一点、对网格进行旋转和缩放。

移动

• ctx.translate(x, y) 可以移动原点的位置。
• x 是左右偏移量，y 是上下偏移量。

旋转

• ctx.rotate(angle) 可以以原点为中心旋转 canvas。 旋转的角度(angle)，它是顺时针方向的，以 弧度为单位的值。

缩放

• ctx.scale(scalewidth,scaleheight) 可以缩放当前绘图，更大或更小。
• 参数：都是数字，表示缩放的宽度和高度的倍数。
• 如果对绘图进行缩放，所有之后的绘图也会被缩放，定位也会被缩放。

状态的保存和恢复

• Canvas 中可以保存当前的状态到内存中，一旦状态发生了改变后，例如进行了变形，后期可以通过恢复方法，恢复到保存过的状态中。
• 保存和恢复多用于复杂的图形绘制

名称	方法	作用
保存	ctx.save()	保存画布(canvas)的当前的所有状态
恢复	ctx.restore()	恢复上次保存的状态

Canvas 中图片的使用和管理

绘制图像

• 引入图像到 canvas 里的常用方法，需要以下三步基本操作：
  • 使用 new Image() 方法创建一个图片对象
  • 给图片对象设置 src 属性，获得URL地址。
  • 图片加载完毕后，使用 ctx.drawImage() 函数将图片绘制到画布上

ctx.drawImage() 方法

• ctx.drawImage()函数根据参数个数不同可以绘制完整图片和切片两种。
  • ctx.drawImage(image, x, y)：在指定的 (x,y) 位置绘制 image 图片
  • ctx.drawImage(image, x, y, width, height)：对 image 图片进行宽度高度的缩放
  • ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：在指定 的(dx,dy) 位置绘制 image 图片中的某一处切片，切片在原图中的起始点位置为 (sx,sy)， 切片的宽高为 sWidth、sHeight。

Canvas 运动方法

简单运动

• canvas 可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它， 我们不得不对所有内容（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于 电脑的速度。
• canvas 运动形成的过程：必须不断重绘一个新的矩形！利用视觉暂留，形成运动！
• 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 →……