<canvas> - 图1
语义浏览器会创建一个绘图区域，JS访问浏览器提供的渲染上下文（渲染接口），来绘制和操控图形。
关键点类似于图片<canvas> - 图2元素，标签内通过width 和 height属性来设置canvas画布的大小。
关键点canvas依赖分辨率，这和图片的特性是一样的。默认canvas画布的大小是300*150px，如果在CSS样式中再设置盒子的尺寸，会拉伸canvas画布，使得里面的图形失真。
关键点元素使用的是浏览器提供的渲染接口，创建、操控显示的图形，其他元素使用的是浏览器提供的文档接口，操作文档节点。

canvas编程思想

canvas的像素化

canvas无法获取已经画布上的内容，canvas已经像素化了画布上的内容，没法更改删除，需要重绘。Flash可有获取内容的api，因此Flash比较重。

canvas动画编程

  • 为了让canvas动起来，按照清屏、更新、渲染的逻辑进行编程。
  • 通过面向对象的编程思想来实现动画。通过状态属性、方法来管理动画。

例子基于对象编程，实现方框向右移动。

  1. var canvas = document.getElementsByTagName('canvas')[0];
  2. const ctx = canvas.getContext('2d');
  4. const MoveRect = class{
  5.   constructor({x, y, widthRect, heightRect, color}){
  6.     this.x = x;
  7.     this.y = y;
  8.     this.widthRect = widthRect;
  9.     this.heightRect = heightRect;
  10.     this.color = color;
  12.     this.moveRight();
  13.   }
  14.   //将图形渲染出来的方法
  15.   render(){
  16.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  17.     ctx.fillStyle = this.color;
  18.     ctx.fillRect(this.x, this.y, this.widthRect, this.heightRect);
  19.   }
  21.   update(){
  22.     this.x++;   //更新图形状态
  23.   }
  25.   //通过定时器启动动画。
  26.   moveRight(){
  27.     setInterval(() => {
  28.       this.update();
  29.       this.render();
  30.     }, 20);
  31.   }    
  32. }
  34. new MoveRect({
  35.   x: 10,
  36.   y: 10,
  37.   widthRect: 50,
  38.   heightRect: 50,
  39.   color: 'pink'
  40. });

fallback

对于不兼容的浏览器，而忽略本身，而读取标签里的content。

  1. <canvas id="clock" width="150" height="150">    //忽略
  2.   <img src="images/clock.png" width="150" height="150" alt=""/>        //显示图片
  3. </canvas>
var canvas = document.getElementsByTagName('canvas')[0];
if (canvas.getContext('2d')) {
  var ctx = canvas.getContext('2d');
} else {
  // canvas-unsupported code here
}

网格

canvas图形的坐标空间，以像素为单位。
image.png

渲染

当canvas渲染轮廓线时，一半在路径里，一半在路径外。当线宽为1px时，会占据2px的宽度显示，导致线的颜色变的模糊。
image.png