Canvas API

一、Canvas概述

• Canvas API（画布）用于在网页实时生成图像，并且可以操作图像的内容。
• 使用前，要先创建一个canvas网页元素，即<canvas></canvas>。所需功能全由js代码实现。

二、Canvas常见属性

height和width

• 表示的是canvas绘制区域的宽高。
• 注意：不要直接使用style给canvas元素设置宽高（若是使用style设置，那么久表示的是元素的大小）

<canvas id="canvas"></canvas>
<script>
   var sw = screen.availWidth;
   var sh = screen.availHeight;
   //获取canvas对象
   var canvas = document.querySelector('canvas');
   //设置canvas的宽高属性
   canvas.width = sw;
   canvas.height = sh;

三、Canvas常见方法

1.getContext()----返回绘制模型

• 语法：

	var context = canvas.getContext(contextType);
	var context = canvas.getContext(contextType, contextAttributes);

• 参数说明
• contextType—String类型
• 若参数为’2d’：会创建并返回一个CanvasRenderingContext2D对象，主要用来进行2d绘制，也就是二维绘制，平面绘制。
• 若参数为’webgl’或’experimental-webgl’：返回一个WebGLRenderingContext对象，WebGL（全写Web Graphics Library）是一种3D绘图协议，可以为HTML5 Canvas提供硬件3D加速渲染。
• contextAttributes（可选）—Object

<canvas id="canvas"></canvas>
<script>
   //创建2d模型
   var context = canvas.getContext('2d');
</script>

2.toDataURL()----将画布转化为base64格式的图片

• 语法：

	canvas.toDataURL(mimeType, quality);

• mimeType表示需要转换的图像的mimeType类型。默认值是image/png，还可以是image/jpeg，甚至image/webp（前提浏览器支持）等。
• quality表示转换的图片质量。范围是0到1。此参数要想有效，图片的mimeType需要是image/jpeg或者image/webp，其他mimeType值无效。默认压缩质量是0.92。

<canvas id="canvas"></canvas>
<script>
   //转化图片
   console.log(canvas.toDataURL('image/jpeg', 0.6));
</script>