canvas实践笔记

对canvas使用有过好几次了，曾经用基于canvas的createjs写过一个俄罗斯方块的游戏，毕业设计做的是多人在线绘图网站，自然也是canvas实现的。
最近工作需要，需要在h5端调用canvas API实现生成一张带有数据图的图片，“传送给native端”，所以对canvas的使用做一个总结。[2016-08-27更正：生成图片需要走http传输协议，app内与native通信走file传输协议，协议不同，不能直接通信，所以不能完成直接传送给native，只能传送给server端。]
由简到难，本文首先简单介绍canvas几个常用API，然后给出图片预加载的代码，最后会列举绘制过程中的多个坑。

SVG绘制图形是通过构建一棵XML树来实现，canvas来绘制图形是通过调用它提供的方法。所以在canvas中移除相应的元素需要先将当前的相应元素擦除，然后重新绘制。

业务实现效果图，制作过程3.5天，踩了不少坑，下面进行详细讲解。
jk-img

图形绘制一些简单的API

canvas标签在html文档流中存放，标签内的区域都是画布，所以可以在标签上直接设置画布的长宽。

1
<canvas id="mycanvas" width=100 height=100></canvas>

前面已经说过，canvas需要调用API来绘制图形，大部分API需要调用一个上下文对象来实现，所以需要getContext('2d')方法（传参2d）来获取这个CanvasRenderingContext2D对象，使用这个对象来实现在画布上绘制二维图形。
注意每个canvas元素只有一个上下文对象

1
2
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
 * 绘制路径；
 * beginPath开始，closePath结束，绘制比较粗糙；
 * 手动lineTo结束位置到起点位置，绘制比较精细；
 * 完成一条路径后重新开始另一条路径，必须有beginPath
 */
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(100,200);
context.closePath();

/**
 *  画圆－（0,360）的弧线
 *  context.arc(left, right, radius, 0, Math.PI*2);
 */
context.strokeStyle = '#999';
context.beginPath();
context.arc(30, 60, 30, 0, Math.PI*2);
context.closePath();
context.stroke();
/**
 *  画矩形
 *  rect(x, y, width, height)
 */
context.rect(10, 10, 100, 100);
context.fill();
/**
* 填充路径区域；
* 如果路径没有闭合，则默认起点与终点连接；
* 可以通过先设置类属性来控制外观；
*/
context.fillStyle = '#ccc';
context.fill();
/**
 * 描边；
 * 可以通过先设置类属性来控制外观；
 */
context.strokeStyle = '#008';
context.stroke();
/**
 * 设置字体和大小
 */
 context.font = "40pt Calibri";
 context.fillText("Hello World!", x, y);

在线demo

实践过程中发现context.fill()有个坑，特别是在给矩形填充颜色的时候，context的指向会出现问题，可能会将之前已经填充的内容重新填充。
简易使用context.fillRect()这个属性来填充矩形。
如果不可避免需要使用context.fill()这个属性，尽量提前使用，不要影响到后面的内容。

插入图片
1
2
3
4
5
function DrawPic(imgParam,left,top){
  this.left = left || 0;
  this.top = top || 0;
  context.drawImage(imgParam,this.left,this.top);
}

[业务需求]：将切图展示在画布的指定位置，设置图片大小
canvas绘图阻塞浏览器，按顺序执行，画图之前需要图片全部加载成功，作者编写了图片预加载功能，在完全加载完成后进行绘制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function batchProcessingImgs(imgList,newImgList){
  imgList.reduce(function(pre,cur){
    var img = createNewImg(cur)
    img.onload = function(){
    newImgList.push(img);
  }
},{})
return newImgList;
}

window.onload = function(){
  if(imgList.length == newImgList.length){
    //do something
  }
}

imgList存储图片源文件，newImgList存储加载完成的图片，只有当两个list长度相等时，图片完全加载完成，可以进行画布绘制，另外加载图片的过程是浏览器的异步行为，newImgList中的图片顺序和imgList不一定相同，所以需要根据名字查询图片信息。（在附录的链接中作者给出了完整的实现）

缩小图片并剪裁成圆形

[业务需求]：展示用户的圆形小头像，后端返回的是一定尺寸的大头像，所以我需要先等比例缩放，然后进行圆形裁剪。
需要注意的是，arc+clip的方法只对绘制的图形产生效果，对图片不起作用。
所以只能用填充的方法，设置一个填充pattern(ctx.createPattern(image, repetition))，但是填充的效果是图片的原像素尺寸，如果原图是一张超大图，很有可能填充的只是黑色的一个小角，所以在填充之前需要对原图进行等比例缩小。
有个CanvasPattern.setTransform(matrix)的方法，matrix是SVG的缩放方式，OMG！难道写canvas还要和SVG合用吗？好吧，尝试之后遇到了更难过的结果，连亲爱的chrome都不支持！那就别说其他浏览器了。
换种思路，能不能用别的方式缩小图片呢？还是老大厉害，鼓励我尝试了先将图片绘制在另一个canvas上下文中，然后将新的canvas调整到我所需要的尺寸，然后将新的canvas作为填充pattern填充到老canvas的fill中，尝试结果，完美实现填充！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * 按比例缩小图像并裁剪
 * left，top:左上角
 * radius:裁剪后的圆半径，注意是半径
 * 比较宽和高，小的设置为圆的直径长，大的裁剪为scaleBorder
 */
function scaleAndClipImageToRound(context,img,left,top,radius){
  var scaleBord,
  width = img.width,
  height = img.height;
  context.save();
  var newCanvans = document.createElement('canvas');
  newCanvans.width = img.width;
  newCanvans.height = img.height;
  var newCtx = newCanvans.getContext("2d");
	
  scaleBord = (width >= height ? 2*radius/height : 2*radius/width);
  newCtx.scale(scaleBord,scaleBord);
  newCtx.drawImage(img,0,0);

  var p = ctx.createPattern(newCanvans,"no-repeat");
  context.fillStyle = p;
  context.translate(left, top);
  context.beginPath();
  context.arc(radius, radius, radius, 0, Math.PI*2);
  context.fill();
  context.closePath();
  context.restore();
}
状态堆栈

画布API允许保存当前画布的状态，采用的是堆栈的方式，采用save和restore方法，相当于push和pop，恢复堆栈中的状态。也可以理解为PS的一个图层，作者实践过程中在使用context.scale()这个属性的时候一定需要调用pop和restore。

1
2
context.save();
context.restore();
toDataURL时间上的坑

业务需求需要先向后端请求数据，然后进行绘制，我在做这个需求的时候遇到两个坑。
第一个坑：toDataURL后发现ajax请求的数据还没有返回，所以canvas没有画完。因为ajax请求是异步的，无法判断精确data的返回时间，所以只能在请求成功的回调中进行绘制方法的调用。（附录代码段中作者封装了多个请求执行完毕后处理绘图）
第二个坑：需要在图片预加载结束后画图，然后toDataURL，本地运行时图片加载时间可以忽略不计，而生产环境时加载图片是需要一定时间的，所以判断加载完成的js语句根本没有执行。解决方法是每加载一次图片时进行图片加载判断，即有100张图片就需要执行100次判断，直到第100次判断图片加载完全执行完毕，调用绘图方法进行绘制。

附录
我的纯函数式实现canvas绘制设计稿代码
我的对象方法整理版（包括处理多个请求）代码