canvas

基本介绍

什么是canvas

1. <canvas>标签是h5新增的元素，能够用 js脚本语言（canvas API）绘制图形。例如，绘制图形，制做照片，建立动画，甚至进行实时视频处理和渲染。<canvas>只是画布，js是画笔，能够在画布上画画。
2. canvas标签只有两个属性：width（默认300px），height（默认150px）

<canvas id="canvas" width="300" height="150"></canvas>

var canvas = document.getElementById('canvas');
// canvas.width = 30;
// canvas.height = 300;

canvas解决了什么问题

在互联网出现的早期，Web 只不过是静态文本和连接的集合。1993 年，有人提出了 img 标签，它能够用来嵌入图像。

因为互联网的发展愈来愈迅猛，Web 应用已经从 Web 文档发展到 Web 应用程序。可是图像一直是静态的，人们愈来愈但愿在其网站和应用程序中使用动态媒体（如音频、视频和交互式动画等），因而 Flash 就出现了。

可是随着 Web 应用的发展，出现了 HTML5，在 HTML5 中，浏览器中的媒体元素大受青睐。包括出现新的 Audio 和 Video 标签，能够直接将音频和视频资源放在 Web 上，而不须要其余第三方。

其次就是为了解决只能在 Web 页面中显示静态图片的问题，出现了 Canvas 标签。它是一个绘图表面，包含一组丰富的 JavaScript API，这些 API 使你可以动态建立和操做图像及动画。img 对静态图形内容起到了哪些做用，Canvas 就可能对可编写脚本的动态内容起到哪些做用。

Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的，一个可使用 JavaScript 等脚本语言向其中绘制图像的 HTML 标签。

画布上下文

canvas起初是空白的，其内容是使用javascript来呈现的。咱们须要将canvas标签放在HTML文档中的某个位置，使用JavaScript访问canvas标签，建立画布上下文，而后利用HTML5 Canvas API绘制可视化。canvas元素是嵌入在HTML页面中的实际DOM节点， <canvas> 元素有一个叫作 getContext() 的方法，这个方法是用来得到画布上下文，画布上下文是一个具备属性和方法的对象，可用于在canvas元素内呈现图形，getContext()只有一个参数（ 2d or webgl (3d)），表示上下文的格式。

<canvas id="canvas" width="300" height="150"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

图片

画图

要使用HTML5 Canvas绘制图像，咱们可使用画布上下文的drawImage（）方法，该方法须要一个图像对象和目标点。 目标点定义图像相对于画布左，上角的距离。

因为drawImage（）方法须要一个图像对象，咱们必须首先建立一个图像并在实例化drawImage（）以前等待它加载完成。 咱们能够经过使用图像对象的onload属性来实现这一点。

<canvas id="myCanvas" width="578" height="400"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
  ctx.drawImage(imageObj, 69, 50);
};

图片大小

要使用HTML5 Canvas设置图片的大小，咱们能够向drawImage（）方法，添加2个额外的参数，分别表示图片的width和height。

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

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
  var x = 188;
  var y = 30;
  var width = 200;
  var height = 137;
  ctx.drawImage(imageObj, x, y, width, height);
};

图片裁剪

要使用HTML5 Canvas裁剪图像，咱们能够向drawImage（）方法，添加8个附加参数，sourceX，sourceY，sourceWidth，sourceHeight，destX，destY，destWidth和destHeight，参照下边的图解。

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

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
  var sourceX = 150;
  var sourceY = 0;
  var sourceWidth = 150;
  var sourceHeight = 150;
  var destWidth = sourceWidth;
  var destHeight = sourceHeight;
  var destX = canvas.width / 2 - destWidth / 2;
  var destY = canvas.height / 2 - destHeight / 2;
  ctx.drawImage(imageObj, sourceX, sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight);
};