HTML5 Canvas学习笔记

什么是 canvas?

<canvas> 标签定义的是图形容器，必须使用脚本来绘制图形。
canvas技术指的是利用javascript操作canvas元素绘制图形的技术。
注意: 默认情况下 元素没有边框和内容

<canvas>实例:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
在动画和绘图制作的过程中，经常需要重绘操作，而重绘操作需要获取canvas的宽度与高度.
注意：canvas的宽度与高度，只能通过行间属性或者js动态修改，不要通过样式去修改，否则获取到的宽度与高度不准

如何使用canvas?

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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

要使用canvas,一般都需要进行以下3步操作：
1，获取canvas对象( 通过选择器选择canvas元素 )
2，通过canvas获取他的上下文绘制环境( context )
3，结合javascript调用canvas的api进行图形绘制

Canvas 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
ctx.fillRect(0,0,150,75); 的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布从左上角 (0,0)开始，绘制 150x75 的矩形。

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
实例
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
实例

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
实例
使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心）：

使用 fillText():（实心）
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);


使用 strokeText():（空心)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
实例

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

创建一个线性渐变。使用渐变填充矩形:
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);


创建一个径向/圆渐变。使用渐变填充矩形：
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Canvas对图片进行处理

主要Canvas API有：
绘制图像： drawImage()
获取图像数据： getImageData()
重写图像数据： putImageData()
导出图像： toDataURL()
1. drawImage()
用于将图像绘制到Canvas画布当中，具体用法有三种：
在画布上定位图像：context.drawImage(img,x,y)
在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height)
剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

参数 描述

img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

2. getImageData()
该方法用于从Canvas画布中获取图像数据，具体用法如下：
获取画布指定矩形范围内的像素数据：var ImageData = context.getImageData(x,y,width,height)

参数 描述
x 开始复制的左上角位置的 x 坐标。
y 开始复制的左上角位置的 y 坐标。
width 将要复制的矩形区域的宽度。
height 将要复制的矩形区域的高度。

该方法会返回一个ImageData对象，该对象有三个属性分别为：width、height和data，而我们最主要用到的就是这个data数组，因为它保存着图像中每一个像素的数据。有了这些数据之后我们便可以对它们进行处理，最后再将其重写至Canvas画布中，这样就实现了对图片的处理转换。
data是一个数组，保存着图像中每一个像素的数据。在data数组中，每一个像素用4个元素来保存，分别表示red、green、blue、透明度。
//第一个像素如下
var data = imageData.data;
var red = data[0];
var green = data[1];
var blue = data[2];
var alpha = data[3];
数组中每个元素的值是在0-255之间，能够直接访问到原始图像数据，就能够以各种方式来操作这些数据

[注意]图像中有多少像素，data的长度就等于像素个数乘以4

3. putImageData()

该方法很简单，就是用于将图像数据重写至Canvas画布中，具体用法如下：
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

参数 描述
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY 可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。

4. toDataURL()
这个方法与以上三种方法不同，它是Canvas对象的方法，该方法返回的是一个包含data URI的字符串，该字符串可直接作为图片路径地址填入<img>标签的src属性当中，具体用法如下：
var dataURL = canvas.toDataURL(type, encoderOptions);

参数 描述
type 可选。图片格式，默认为 image/png。
encoderOptions 可选。在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

实例

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<div id="result"></div>

//JavaScript
window.onload = function(){
  var canvas = document.getElementById("canvas"),  //获取Canvas画布对象
    context = canvas.getContext('2d'); //获取2D上下文对象，大多数Canvas API均为此对象方法
  var image = new Image(); //定义一个图片对象
  image.src = 'imgs/img.jpg'; 
  image.onload = function(){ //此处必须注意！后面所有操作均需在图片加载成功后执行，否则图片将处理无效
    context.drawImage(image,0,0); //将图片从Canvas画布的左上角(0,0)位置开始绘制，大小默认为图片实际大小
    var handle = document.getElementById("handle");
    var create = document.getElementById("create");
    handle.onclick = function(){ // 单击“处理图片”按钮，处理图片
      var imgData = context.getImageData(0,0,canvas.width,canvas.height);  //获取图片数据对象
      var data = imgData.data; //获取图片数据数组，该数组中每个像素用4个元素来保存，分别表示红、绿、蓝和透明度值
      var average = 0;
      for (var i = 0; i < data.length; i+=4) {
        average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //将红、绿、蓝色值求平均值后得到灰度值
        data[i] = data[i+1] = data[i+2] = average; //将每个像素点的色值重写
      }
      imgData.data = data;
      context.putImageData(imgData,0,0); //将处理后的图像数据重写至Canvas画布，此时画布中图像变为黑白色
    };
    create.onclick = function(){ // 单击“生成图片”按钮，导出图片
      var imgSrc = canvas.toDataURL(); //获取图片的DataURL
      var newImg = new Image();
      var result = document.getElementById("result");
      newImg.src = imgSrc; //将图片路径赋值给src
      result.innerHTML = '';
      result.appendChild(newImg);
    };
  };

最近项目中遇到一个问题：
项目的需求是把两张图片不同的地方，用颜色区分。
这里有个bug 是比较小的那张图片多出来高度的区域data数据透明都是0，所以就导致了有些地方明明是不同的却当做相同来处理。
项目代码是不同地方用绿色显示，相同地方用黑色显示。
错误效果

修改—把 透明度 为0的地方也当做不同来处理。（因为项目是不需要支持png 透明背景，如果需要支持暂时无解）

正确效果

注：任何在画布以外的元素都会被返回成一个透明黑的ImageData对像。

补充说明

ImageData 对象
ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width： 图片宽度，单位是像素
height：图片高度，单位是像素
data: Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。
data属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是”RGBA”格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组。

Uint8ClampedArray
包含高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1
要读取图片中位于第50行，第200列的像素的蓝色部份，你会写以下代码：

imgData= imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];

创建一个ImageData对象
去创建一个新的，空白的ImageData对象，你应该会使用createImageData() 方法。有2个版本的createImageData()方法。

var myImageData = ctx.createImageData(width, height);

上面代码创建了一个新的具体特定尺寸的ImageData对象。所有像素被预设为透明黑。

你也可以创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据。

var myImageData = ctx.createImageData(anotherImageData);

得到像素数据

为了获得一个包含画布场景像素数据的ImageData对像，你可以用getImageData()方法：

var myImageData = ctx.getImageData(left, top, width, height);

这个方法会返回一个ImageData对象，它代表了画布区域的对象数据，此画布的四个角落分别表示为(left, top), (left + width, top), (left, top + height), 以及(left + width, top + height)四个点。这些坐标点被设定为画布坐标空间元素。

注：任何在画布以外的元素都会被返回成一个透明黑的ImageData对像。

写入像素数据
你可以用putImageData()方法去对场景进行像素数据的写入。

ctx.putImageData(myImageData, dx, dy);

dx和dy参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标。
例如，为了在场景内左上角绘制myImageData代表的图片，你可以写如下的代码：

ctx.putImageData(myImageData, 0, 0);

此块代码来自于
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
https://joshondesign.com/p/books/canvasdeepdive/chapter01.html