Canvas经常使用API

概述

Canvas API提供了一个经过JavaScript和HTML的<canvas>元素来绘制图形的方式。它能够用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API主要聚焦于2D图形。而一样使用<canvas>元素的WebGL API则用于绘制硬件加速的2D和3D图形。

参考文档：Canvas API

基础示例

在画布上绘制一个绿色的长方形。

<canvas id="canvas">
Not Support Canvas!
</canvas>
复制代码

若是浏览器不支持canvas，则显示---Not Support Canvas!

1. 用document.getElementById('canvas')获取HTML<canvas>元素的引用。
2. 用HTMLCanvasElement.getContext()方法获取这个元素的context---图像稍后将在此被渲染。经过getContext获取context对象（上下文对象），Canvas 的 API就定义在这个context对象上面。
3. 由CanvasRenderingContext2D接口完成实际的绘制。fillStyle属性让长方形变成绿色。fillReact()方法将它的左上角放在(10 , 10),把它的大小设置成宽150和高100.fillReact()方法用来绘制矩形。

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'green'
ctx.fillRect(10, 10, 150, 100)
复制代码

上述代码中，getContext方法指定参数2d,表示该canvas节点用于生成2D平面图案。参数是webgl,就表示用于生成3D图像（即立体图案），这部分叫作WebGL API。

1. 绘制路径

beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。

ctx.beginPath() // 开始路径绘制
ctx.moveTo(20, 30) // 设置路径起点，坐标为（20，30）
ctx.lineTo(200, 10) // 设置路径终点坐标为（200，20）
ctx.lineWidth = 10.0 // 设置线宽
ctx.strokeStyle = '#CC0000'; // 设置线的颜色
ctx.stroke() // 对线进行着色，这时整条线就变得可见
复制代码

效果图以下：

其中 moveTo和 lineTo方法能够屡次使用。

2. 图像处理方法

2.1 drawImage()函数能够将图片绘制到画布上。作法是读取图片后，使用drawImage方法在画布内进行重绘。

因为图像的载入须要时间，所以drawImage方法须要在图像彻底载入后再调用：

let img = new Image()
img.onload = function () {
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.width = image.width
  ctx.height = image.height
  ctx.drawImage(img, 0, 0) // (0 ,0 )表明图片在画布上的位置
}
img.src = 'image.png'

复制代码

上面代码将一个PNG图像载入画布。drawImage()方法接受三个参数，第一个参数是图像文件的DOM元素（即<img>节点），第二个和第三个参数是图像左上角在画布中的坐标，上例中的(0, 0)就表示将图像左上角放置在画布的左上角。

2.2 用toDataURL()或toBlob()将canvas数据转化为图片文件形式，并控制导出图片的质量

let img = new Image()
// toDataURL
img.src = ctx.toDataURL('image/png', 0.92)
// toBlob
img.src = ctx.toBlob('','image/png', 0.92)
复制代码

区别：

1. toDataURL是把图片转换成base64格式信息，纯字符的图片标识方法。第一个image/png参数表示导出的base64图片类型默认是png，即'image/png'，也能够为 'image/jpeg'或webp等格式。第二个参数0.92表示导出图片的质量，只有导出图片为jpg和webp时才有效果，默认是0.92。
2. toBlob:是把canvas转换成Blob文件（二进制文件），一般用于文件上传。

2.3 用getImageData方法读取Canvas的内容，使用putImageData方法将数组内容从新绘制在Canvas上。

getImageData方法能够用来读取Canvas的内容，返回一个对象，包含了每一个像素的信息。

let imageData = context.getImageDate(0, 0, canvas.width, canvas.height)
复制代码

imageData对象有一个data属性，它的值是一个一维数组。改数组的值，依次是每一个像素的红、绿、蓝、alpha通道值，所以该数组的长度等于图像的像素宽度x图像的像素高度x4，每一个值的范围是0-255。这个数组不只可读，并且可写，所以经过操做这个数组的值，就能够达到操做图像的目的。修改这个数组之后，使用putImageData方法将数组内容从新绘制在Canvas上。

context.putImageData(imageData, 0, 0)
复制代码