Canvas学习笔记（一）

本文旨在记录自己学习Canvas中遇到的一些觉得有必要记下来的知识点。

---

一.getContext()方法

MDN上的定义：

  canvas.getContext(contextType, contextAttributes);

contextType参数有以下四种：

1. “2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
2. “webgl”(“experimental-webgl”),创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。
3. “webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。
4. “bitmaprenderer”，创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。

contextAttributes参数可传递几个参数集合用来创建渲染上下文：

canvas.getContext('webgl', { antialias: false,
                             depth: false });

在此比较关注’2d’的可配置参数选项：

1. alpha（boolean)：表示canvas是否包含一个alpha通道，设为false则浏览器知道背景永远不透明，能加速对于透明场景和图像的绘制。
2. willReadFrequently（Boolean）：表示是否计划有大量的回读操作，频繁调用getImageData()方法时能节省内存，仅Gecko内核浏览器支持。
3. storage（String）：声明使用的storage类型，默认为”persistent”。

本次学习中主要针对2D渲染，由getContext()方法返回渲染上下文。我将此上下文理解为画笔，通过fillRect(),moveTo()等方法在画布上进行图像绘制。

---

二.清除画布的方法

1. clearRect(x, y, width, height)
   类似于图像处理软件中的橡皮擦，指定一块矩形区域，将其中的内容进行擦除

2. 设置canvas的宽高
   以使用jquery举例：

canvas.attr('width', canvas.width());
canvas.attr('height', canvas.height());

     该方法重置画布，需要注意的是之前给context设置的fillStyle等样式都将被重置，而采用第一种方法则只是擦除绘制内容。

---

三.使Canvas填满浏览器窗口
    对canvas进行样式的宽高百分比设置并不起作用，可通过获取浏览器宽高来进行初始化（canvas默认大小300，150，不同浏览器内核对于canvas最大大小限制不同）：

canvas.attr('width', $(window).get(0).innerWidth);
canvas.attr('height', $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());

    由于设置了其他内容，所以canvas并没有占满浏览器窗口，但宽高是等于窗口大小的，问题在于canvas四周有空隙，需要设置样式来清除：

body {
  margin: 0;
}

canvas {
  display: block;
  margin: 0;
  padding: 0;
}

可以看到浏览器边距已经消失，但设置好初始大小后对窗口进行缩放则会出现滚动条或空白，因为canvas并不会随之缩放：

    所以需要在监听到窗口大小改变后实时修改canvas宽高：

$(window).resize(resizeCanvas);
function resizeCanvas() {
 // 设置canvas宽高与浏览器窗口一致
 ...
}
// 初始化
resizeCanvas();

    canvas就像图片一样，通过设置样式改变大小不能改变canvas自身大小，则会造成拉伸，直接设置canvas宽高则不会，修改canvas宽高后要重新绘制一次内容。