阅读 258

学习简单又不简单的 canvas

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 运动形成的过程:必须不断重绘一个新的矩形!利用视觉暂留,形成运动!
  • 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 → 清屏 → 更新 → 渲染 →……
文章分类
前端
文章标签