Canvas

Canvas

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。
基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。
<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

canvas因为是html5引入的， 存在兼容性问题

体验Canvas

什么是Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建Canvas元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

/*属性 width 和 height属性指的是画布的大小*/
<canvas id="myCanvas" width="200" height="100"></canvas>

注意：不要在css中设置canvas的宽高，css中设置的是canvas的大小，而不是canvas中画布的大小

通过JavaScript来绘制

    /*获取元素*/
    var myCanvas = document.querySelector('#myCanvas');
    /*获取绘图工具*/
    var context = myCanvas.getContext('2d');
    /*设置绘图的起始位置*/
    context.moveTo(100,100);
    /*绘制路径*/
    context.lineTo(200,100);
    /*描边*/
    context.stroke();

    /*设置绘图的起始位置*/
    context.moveTo(150.5,150.5);
    /*绘制路径*/
    context.lineTo(250.5,150.5);
    /*描边*/
    context.stroke();

# 关于canvas中的0.5  
https://www.jianshu.com/p/c0970eecd843

Canvas的基本使用

图形绘制

需要理解些概念：

• 路径的概念

• 路径的绘制

  • 描边 stroke()
  • 填充 fill()

• 闭合路径

  • 手动闭合
  • 程序闭合 closePath()

• 填充规则(非零环绕)

  非零环绕的规则：
  1.从需要判断是否要填充的区域开始随便拉一条线出去
  2.看所有和拉出去的那条线相交的点，方向顺时针+1，逆时针-1
  3.看上面第二步+1 和 -1后的结果。如果结果是0，则不填充。如果结果不是0，则填充

• 开启新的路径 beginPath()

设置样式

• 画笔的状态
  • lineWidth 线宽，默认1px
  • lineCap 线末端类型：(butt默认)、round、square
  • lineJoin 相交线的拐点 miter(默认)、round、bevel
  • strokeStyle 线的颜色
  • fillStyle 填充颜色
  • setLineDash() 设置虚线
  • getLineDash() 获取虚线宽度集合
  • lineDashOffset 设置虚线偏移量（负值向右偏移）

案例：

绘制三条不同颜色的平行线

/*绘制三条不同颜色的平行线*/
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画平行线*/
    ctx.beginPath();/*开启新路径*/
    /*蓝色  10px*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    /*描边*/
    ctx.stroke();

    /*红色 20px*/
    ctx.beginPath();/*开启新路径*/
    ctx.moveTo(100,200);
    ctx.lineTo(300,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 20;
    /*描边*/
    ctx.stroke();

    /*绿色 30px*/
    ctx.beginPath();/*开启新路径*/
    ctx.moveTo(100,300);
    ctx.lineTo(300,300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 30;
    /*描边*/
    ctx.stroke();
</script>

绘制三角形(填充/描边)

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

/*1.绘制一个三角形*/
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
/*起始点和lineTo的结束点无法完全闭合缺角*/
/*使用canvas的自动闭合 */
//ctx.lineTo(100,100);
/*关闭路径*/
ctx.closePath();

ctx.lineWidth = 10;
/*2.描边*/
ctx.stroke();
/*3.填充*/
//ctx.fill();

绘制镂空正方形

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

/*1.绘制两个正方形 一大200一小100 套在一起*/
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();

/*注意绘制图形时候点的顺序，顺序的不同会产生非零环绕的问题*/
ctx.moveTo(150,150);
ctx.lineTo(150,250);
ctx.lineTo(250,250);
ctx.lineTo(250,150);
ctx.closePath();

/*2.去填充*/
//ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();

/*在填充的时候回遵循非零环绕规则*/

连接点、线末端类型

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

/*画平行线*/
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,20);
ctx.lineTo(300,100);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,120);
ctx.lineTo(300,200);
ctx.strokeStyle = 'red';
ctx.lineWidth = 20;
ctx.lineCap = 'square';
ctx.lineJoin = 'bevel';
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(200,220);
ctx.lineTo(300,300);
ctx.strokeStyle = 'green';
ctx.lineWidth = 30;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();

绘制虚线

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

/*画线*/
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
/*虚线是由实线和虚线组成的 
      setLineDash([5,10]) 含义是实线长度5，虚线长度10，以此排列
      当然setLineDash()也可以设置三个参数，会产生不规则的排列方式*/
ctx.setLineDash([20]);
/*获取虚线的排列方式 获取的是不重复的那一段的排列方式*/
//console.log(ctx.getLineDash());

/*
  lineDashOffset:
  如果是正数，设置的偏移是画线的反方向的偏移
  如果是负数，设置的偏移是画线的方向的偏移
*/
ctx.
    lineDashOffset= -20;

ctx.stroke();

绘制由黑到白渐变的矩形

/*线是由点构成的*/
ctx.lineWidth = 30;
for (var i = 0; i < 255; i++) {
    ctx.beginPath();
    ctx.moveTo(100+i-1,100);
    ctx.lineTo(100+i,100);
    ctx.strokeStyle = 'rgb('+i+',0,0)';
    ctx.stroke();
}

绘制网格

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

/*1.绘制网格*/
/*2.网格的大小*/
var gridSize = 10;
var canvasHeight = ctx.canvas.height;
var canvasWidth = ctx.canvas.width;
/*3.画多少条X轴方向的线 横线的条数  画布高度*/
/*var canvasHeight = myCanvas.height;
    var canvasWidth = myCanvas.width;
    console.log(canvasHeight);
    console.log(canvasWidth);*/
/*console.log(ctx.canvas.width);
    console.log(ctx.canvas.height);*/
var xLineTotal = Math.floor(canvasHeight / gridSize);
for (var i = 0; i <= xLineTotal; i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * gridSize - 0.5 );
    ctx.lineTo(canvasWidth, i * gridSize - 0.5);
    ctx.strokeStyle = '#eee';
    ctx.stroke();
}
/*4.画多少条Y轴方向的线*/
var yLineTotal = Math.floor(canvasWidth / gridSize);
for (var i = 0; i <= yLineTotal; i++) {
    ctx.beginPath();
    ctx.moveTo(i*gridSize - 0.5 ,0);
    ctx.lineTo(i*gridSize - 0.5 ,canvasHeight);
    ctx.strokeStyle = '#eee';
    ctx.stroke();
}
/*5.遍历的形式去画*/

绘制坐标系

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

/*1.绘制坐标系*/
/*2.确定原点*/
/*3.确定距离画布旁边的距离*/
/*4.确定坐标轴的长度*/
/*5.确定箭头的大小  是个等腰三角形  10 */
/*6.绘制箭头填充*/

var space = 20;
var arrowSize = 10;

/*计算原点*/
var canvasWidth = ctx.canvas.width;
var canvasHeight = ctx.canvas.height;

var x0 = space;
var y0 = canvasHeight - space;

/*绘制x轴*/
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(canvasWidth - space, y0);
/*箭头*/
ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
ctx.lineTo(canvasWidth - space, y0);
ctx.fill();
ctx.stroke();

/*绘制y轴*/
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(space, space);
/*箭头*/
ctx.lineTo(space + arrowSize / 2, space + arrowSize);
ctx.lineTo(space - arrowSize / 2, space + arrowSize);
ctx.lineTo(space, space);
ctx.fill();
ctx.stroke();

绘制点

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

/*1.绘制点*/
/*2.点的尺寸*/
/*3.以坐标中心绘制点*/

/*点坐标*/
var coordinate = {
    x:100,
    y:100
}
/*点尺寸*/
var dottedSize = 10;

ctx.moveTo(coordinate.x - dottedSize / 2,coordinate.y - dottedSize / 2);
ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y - dottedSize / 2);
ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y + dottedSize / 2);
ctx.lineTo(coordinate.x - dottedSize / 2,coordinate.y + dottedSize / 2);
ctx.closePath();
ctx.fill();

绘制折线图

/*1.构造函数*/
var LineChart = function (ctx) {
    /*获取绘图工具*/
    this.ctx = ctx || document.querySelector('canvas').getContext('2d');
    /*画布的大小*/
    this.canvasWidth = this.ctx.canvas.width;
    this.canvasHeight = this.ctx.canvas.height;
    /*网格的大小*/
    this.gridSize = 10;
    /*坐标系的间距*/
    this.space = 20;
    /*坐标原点*/
    this.x0 = this.space;
    this.y0 = this.canvasHeight - this.space;
    /*箭头的大小*/
    this.arrowSize = 10;
    /*绘制点*/
    this.dottedSize = 6;
    /*点的坐标 和数据有关系  数据可视化*/
}
/*2.行为方法*/
LineChart.prototype.init = function (data) {
    this.drawGrid();
    this.drawAxis();
    this.drawDotted(data);
};
/*绘制网格*/
LineChart.prototype.drawGrid = function () {
    /*x方向的线*/
    var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
    this.ctx.strokeStyle = '#eee';
    for (var i = 0; i <= xLineTotal; i++) {
        this.ctx.beginPath();
        this.ctx.moveTo(0, i * this.gridSize - 0.5);
        this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
        this.ctx.stroke();
    }
    /*y方向的线*/
    var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
    for (var i = 0; i <= yLineTotal; i++) {
        this.ctx.beginPath();
        this.ctx.moveTo(i * this.gridSize - 0.5, 0);
        this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
        this.ctx.stroke();
    }
};
/*绘制坐标系*/
LineChart.prototype.drawAxis = function () {
    /*X轴*/
    this.ctx.beginPath();
    this.ctx.strokeStyle = '#000';
    this.ctx.moveTo(this.x0, this.y0);
    this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
    this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
    this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
    this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
    this.ctx.stroke();
    this.ctx.fill();
    /*Y轴*/
    this.ctx.beginPath();
    this.ctx.strokeStyle = '#000';
    this.ctx.moveTo(this.x0, this.y0);
    this.ctx.lineTo(this.space, this.space);
    this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
    this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
    this.ctx.lineTo(this.space, this.space);
    this.ctx.stroke();
    this.ctx.fill();
};
/*绘制所有点*/
LineChart.prototype.drawDotted = function (data) {
    /*1.数据的坐标 需要转换 canvas坐标*/
    /*2.再进行点的绘制*/
    /*3.把线连起来*/
    var that = this;
    /*记录当前坐标*/
    var prevCanvasX = 0;
    var prevCanvasY = 0;
    data.forEach(function (item, i) {
        /* x = 原点的坐标 + 数据的坐标 */
        /* y = 原点的坐标 - 数据的坐标 */
        var canvasX = that.x0 + item.x;
        var canvasY = that.y0 - item.y;
        /*绘制点*/
        that.ctx.beginPath();
        that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
        that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
        that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
        that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
        that.ctx.closePath();
        that.ctx.fill();
        /*点的连线*/
        /*当时第一个点的时候 起点是 x0 y0*/
        /*当时不是第一个点的时候 起点是 上一个点*/
        if(i == 0){
            that.ctx.beginPath();
            that.ctx.moveTo(that.x0,that.y0);
            that.ctx.lineTo(canvasX,canvasY);
            that.ctx.stroke();
        }else{
            /*上一个点*/
            that.ctx.beginPath();
            that.ctx.moveTo(prevCanvasX,prevCanvasY);
            that.ctx.lineTo(canvasX,canvasY);
            that.ctx.stroke();
        }
        /*记录当前的坐标，下一次要用*/
        prevCanvasX = canvasX;
        prevCanvasY = canvasY;
    });
};
/*3.初始化*/
var data = [
    {
        x: 100,
        y: 120
    },
    {
        x: 200,
        y: 160
    },
    {
        x: 300,
        y: 240
    },
    {
        x: 400,
        y: 120
    },
    {
        x: 500,
        y: 80
    }
];
var lineChart = new LineChart();
lineChart.init(data);

参考文档

• w3school
• Canvas_API

Canvas图形绘制

矩形绘制

• rect(x,y,w,h) 没有独立路径

• strokeRect(x,y,w,h) 有独立路径，不影响别的绘制

• fillRect(x,y,w,h) 有独立路径，不影响别的绘制

• clearRect(x,y,w,h) 擦除矩形区域

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

/*绘制矩形路径 不是独立路径*/
/*ctx.rect(100,100,200,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();*/

/*绘制矩形  有自己的独立路径*/
//ctx.strokeRect(100,100,200,100);
ctx.fillRect(100,100,200,100);

/*清除矩形的内容*/
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

​

绘制渐变矩形

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

/*也可以使用一个渐变的方案了填充矩形*/
/*创建一个渐变的方案*/
/*渐变是有长度的*/
/*x0 y0 起始点    x1 y1 结束点*/
var linearGradient = ctx.createLinearGradient(100,100,500,100);
linearGradient.addColorStop(0,'pink');
//linearGradient.addColorStop(0.5,'red');
linearGradient.addColorStop(1,'blue');

ctx.fillStyle = linearGradient;
ctx.fillRect(100,100,400,100);

圆弧绘制

• 弧度概念

• arc()

  • x 圆心横坐标

  • y 圆心纵坐标

  • r 半径

  • startAngle 开始角度

  • endAngle 结束角度

  • anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）

绘制四分之一个圆弧

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

/*1.确定圆心  坐标 x y*/
/*2.确定圆半径  r */
/*3.确定起始绘制的位置和结束绘制的位置  确定弧的长度和位置  startAngle endAngle   弧度*/
/*4.取得绘制的方向 direction 默认是false顺时针。*/

/*在中心位置画一个半径150px的圆弧左下角*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
ctx.arc(w/2,h/2,150,0,Math.PI/2);
ctx.stroke();

​

绘制扇形

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

/*在中心位置画一个半径150px的圆弧右上角 扇形  边  填充 */
var w = ctx.canvas.width;
var h = ctx.canvas.height;

/*把起点放到圆心位置*/
ctx.moveTo(w/2,h/2);

ctx.arc(w/2,h/2,150,0,-Math.PI/2,true);

/*闭合路径*/
ctx.closePath();
tx.stroke();
ctx.fill();

​

绘制圆分成六等分颜色随机

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

var w = ctx.canvas.width;
var h = ctx.canvas.height;

/*分成几等分*/
var num = 360;
/*一份多少弧度*/
var angle = Math.PI * 2 / num;

/*原点坐标*/
var x0 = w / 2;
var y0 = h / 2;

/*获取随机颜色*/
var getRandomColor = function () {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

/*上一次绘制的结束弧度等于当前次的起始弧度*/
//var startAngle = 0;
for (var i = 0; i < num; i++) {
    var startAngle = i * angle;
    var endAngle = (i + 1) * angle;
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.arc(x0, y0, 150, startAngle, endAngle);
    /*随机颜色*/
    ctx.fillStyle = getRandomColor();
    ctx.fill();
}

​

根据数据绘制饼图

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

/*1.根据37期的年龄分布绘制饼图*/
/*2.准备统计的数据*/
/*15-20岁 6个*/
/*20-25岁 30个*/
/*25-30岁 10个*/
/*30-35岁 8个*/
var data = [6, 30, 10, 8];
/*3.在饼图表示出来*/
/*4.需要把数据转出弧度*/
var angleList = [];
var total = 0;
data.forEach(function (item, i) {
    total += item;
});
console.log(total);
/*第二是转换成弧度的时候就可以去绘制扇形 减少一次遍历*/
data.forEach(function (item, i) {
    var angle = Math.PI * 2 * (item/total);
    angleList.push(angle);
});
console.log(angleList);

/*5.根据弧度绘制扇形*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var x0 = w/2;
var y0 = h/2;
/*获取随机颜色*/
var getRandomColor = function () {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

var startAngle = 0;
angleList.forEach(function (item,i) {
    /*上一次绘制的结束弧度等于当前次的起始弧度*/
    var endAngle = startAngle + item;
    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.arc(x0,y0,150,startAngle,endAngle);
    ctx.fillStyle = getRandomColor();
    ctx.fill();
    /*记录当前的结束位置作为下一次的起始位置*/
    startAngle = endAngle;
});

绘制文本

• ctx.font = '微软雅黑' 设置字体
• strokeText()
• fillText(text,x,y,maxWidth)
  • text 要绘制的文本
  • x,y 文本绘制的坐标（文本左下角）
  • maxWidth 设置文本最大宽度，可选参数
• ctx.textAlign文本水平对齐方式，相对绘制坐标来说的
  • left
  • center
  • right
  • start 默认
  • end
• ctx.textBaseline 设置基线（垂直对齐方式 ）
  • top 文本的基线处于文本的正上方，并且有一段距离
  • middle 文本的基线处于文本的正中间
  • bottom 文本的基线处于文本的证下方，并且有一段距离
  • hanging 文本的基线处于文本的正上方，并且和文本粘合
  • alphabetic 默认值，基线处于文本的下方，并且穿过文字
  • ideographic 和bottom相似，但是不一样
• measureText() 获取文本宽度obj.width

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

/*1.在画布的中心绘制一段文字*/
/*2.申明一段文字*/
var str = '您吃-,了吗';
/*3.确定画布的中心*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/*4.画一个十字架在画布的中心*/
ctx.beginPath();
ctx.moveTo(0, h / 2 - 0.5);
ctx.lineTo(w, h / 2 - 0.5);
ctx.moveTo(w / 2 - 0.5, 0);
ctx.lineTo(w / 2 - 0.5, h);
ctx.strokeStyle = '#eee';
ctx.stroke();
/*5.绘制文本*/
ctx.beginPath();
ctx.strokeStyle = '#000';
var x0 = w/2;
var y0 = h/2;
/*注意：起点位置在文字的左下角*/
/*有文本的属性  尺寸 字体  左右对齐方式  垂直对齐的方式*/
ctx.font = '40px Microsoft YaHei';
/*左右对齐方式 (center left right start end) 基准起始坐标*/
ctx.textAlign = 'center';
/*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/
ctx.textBaseline = 'middle';
//ctx.strokeText(str,x0,y0);
ctx.fillText(str,x0,y0);
/*6.画一个下划线和文字一样长*/
ctx.beginPath();
/*获取文本的宽度*/
console.log(ctx.measureText(str));
var width = ctx.measureText(str).width;

关于text-align和direction

//左对齐：
如果 textAlign = left
如果textAlign = start && direction = 'ltr'
如果 textAlign = end && direction = 'rtl'
让元素的锚点位于行内盒子的左边，并且左对齐

//右对齐：
如果 textAlign = right
如果 textAlign = end && direction = 'ltr'
如果 textAlign = start && direction = 'rtl'
让元素的锚点位于行内盒子的左边，并且右对齐

//居中对齐：
如果textAlign = center，让元素的锚点处于行内元素的中心并且居中对齐

//关于ltr和rtl:
direction :ltr：布局方向是left to right
rirection :rtl  布局方向是right to left

#注意点：
<div>
  <img src=”images/1.jpg”>
  <img src=”images/2.jpg”>
</div>

1. 在设置div的text-align:left  direction:ltr/rtl的情况下，ltr和rtl下两张图片的前后位置会发生改变；但是如果div中加的是两个span，这两个span的位置不会发生变化。

2．当div中的行内元素是<img>, <button>, <input>, <video>, <object>等标签的时候，ltr和rtl下元素的位置会发生交换。

3.w3c参考文档
https://www.w3.org/TR/2dcontext/

做动画

绘制图片

• drawImage()
  • 三个参数drawImage(img,x,y)
    • img 图片对象、canvas对象、video对象
    • x,y 图片绘制的左上角
  • 五个参数drawImage(img,x,y,w,h)
    • img 图片对象、canvas对象、video对象
    • x,y 图片绘制的左上角
    • w,h 图片绘制尺寸设置(图片缩放，不是截取)
  • 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
    • img 图片对象、canvas对象、video对象
    • x,y,w,h 图片中的一个矩形区域
    • x1,y1,w1,h1 画布中的一个矩形区域

序列帧动画

• 绘制精灵图
• 动起来
• 控制边界
• 键盘控制

坐标变换

• 平移 移动画布的原点
  • translate(x,y) 参数表示移动目标点的坐标
• 缩放
  • scale(x,y) 参数表示宽高的缩放比例
• 旋转
  • rotate(angle) 参数表示旋转角度

案例

绘制图片

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

/*1.加载图片到内存即可*/
/*var img = document.createElement('img');
    img.src = 'image/01.jpg';*/
/*创建对象*/
var image = new Image();
/*绑定加载完成事件*/
image.onload = function () {
    /*实现图片绘制*/
    console.log(image);
    /*绘制图片的三种方式*/

    /*3参数*/
    /*图片对象*/
    /*绘制在画布上的坐标 x y*/
    //ctx.drawImage(image,100,100);

    /*5个参数*/
    /*图片对象*/
    /*绘制在画布上的坐标 x y*/
    /*是图片的大小  不是裁剪  是缩放*/
    //ctx.drawImage(image,100,100,100,100);

    /*9个参数*/
    /*图片对象*/
    /*图片上定位的坐标:从什么位置开始显示图片  x y */
    /*在图片上截取多大的区域:从上面图片的坐标开始截取多大的显示区域  w h*/
    /*绘制在画布上的坐标 x y*/
    /*是图片的大小：将要显示的图片进行缩放*/
    ctx.drawImage(image,400,400,400,400,200,200,100,100);

};
/*设置图片路径*/
image.src = 'image/02.jpg';

绘制帧动画

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

var image = new Image();
image.onload = function () {
    /*图片加载完成*/
    /*动态的去获取当前图片的尺寸*/
    var imageWidth = image.width;
    var imageHeight = image.height;
    /*计算出每一个小人物的尺寸*/
    var personWidth = imageWidth/4;
    var personHeight = imageHeight/4;
    /*位截取图片*/
    /*帧动画  在固定的时间间隔更换显示的图片  根据图片的索引*/
    var index = 0;

    /*绘制在画布的中心*/
    /*图片绘制的起始点*/
    var x0 = ctx.canvas.width /2 - personWidth / 2;
    var y0 = ctx.canvas.height /2 - personHeight / 2;

    ctx.drawImage(image,0,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
    setInterval(function () {
        index ++;
        ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
        ctx.drawImage(image,index * personWidth,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
        if(index >= 3){
            index = 0;
        }
    },1000);

};

方向键控制行走小人

<script>

    var Person = function (ctx) {
        /*绘制工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*图片路径*/
        this.src = 'image/04.png';
        /*画布的大小*/
        this.canvasWidth = this.ctx.canvas.width;
        this.canvasHeight = this.ctx.canvas.height;

        /*行走相关参数*/
        this.stepSzie = 10;
        /* 0 前  1 左  2 右  3 后  和图片的行数包含的图片对应上*/
        this.direction = 0;
        /*x轴方向的偏移步数*/
        this.stepX = 0;
        /*y轴方向的偏移步数*/
        this.stepY = 0;

        /*初始化方法*/
        this.init();
    };

Person.prototype.init = function () {
    var that = this;

    var image = new Image();
    image.onload = function () {
        /*image.onload方法中的this是当前image对象
              因为之前that=this，所以此时image.onload方法中的 that代表当前Person对象  
            */
        /*图片的大小*/
        that.imageWidth = image.width;
        that.imageHeight = image.height;
        /*人物的大小*/
        that.personWidth = that.imageWidth / 4;
        that.personHeight = that.imageHeight / 4;
        /*绘制图片的起点*/
        that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
        that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
        /*2.默认绘制在中心位置正面朝外*/
        that.ctx.drawImage(image,
                           0,0,
                           that.personWidth,that.personHeight,
                           that.x0,that.y0,
                           that.personWidth,that.personHeight);

        /*3.能通过方向键去控制人物行走*/
        that.index = 0;
        document.onkeydown = function (e) {
            if(e.keyCode == 40){
                that.direction = 0;
                if(that.stepY <= that.canvasHeight/2/that.stepSzie) {
                    that.stepY++;
                    that.drawImage(image);
                }
                /*前*/
            }else if(e.keyCode == 37){
                that.direction = 1;
                if(that.stepX >= -that.canvasWidth/2/that.stepSzie) {
                    that.stepX--;
                    that.drawImage(image);
                }
                /*左*/
            }else if(e.keyCode == 39){
                that.direction = 2;
                if(that.stepX <= that.canvasWidth/2/that.stepSzie) {
                    that.stepX++;
                    that.drawImage(image);
                }
                /*右*/
            }else if(e.keyCode == 38){
                that.direction = 3;
                if(that.stepY >= -that.canvasHeight/2/that.stepSzie) {
                    that.stepY--;
                    that.drawImage(image);
                }
                /*后*/
            }
        }
    };
    image.src = this.src;
}

/*绘制图片*/
Person.prototype.drawImage = function (image) {
    this.index ++;
    /*清除画布*/
    this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
    /*绘图*/
    /*在精灵图上的定位 x  索引*/
    /*在精灵图上的定位 y  方向*/
    this.ctx.drawImage(image,
                       this.index * this.personWidth,this.direction * this.personHeight,
                       this.personWidth,this.personHeight,
                       this.x0 + this.stepX * this.stepSzie ,this.y0 + this.stepY * this.stepSzie,
                       this.personWidth,this.personHeight);
    /*如果索引超出了 变成0*/
    if(this.index >= 3){
        this.index = 0;
    }
};

new Person();

</script>

坐标变化

var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
//ctx.translate(100,100);   //让坐标系平移100,100(坐标系原点会发生变化)
//ctx.scale(0.5,1);         //让坐标系x方向缩放0.5 (坐标系刻度会发生变化)
//ctx.rotate(Math.PI/6);    //跟随坐标系远点旋转30°

var startAngle = 0;
ctx.translate(150,150); //坐标系平移150,150
setInterval(function () {
    startAngle += Math.PI/180;
    ctx.rotate(startAngle);
    ctx.strokeRect(0,0,100,100);//因为上面ctx.translate(150,150) 平移了150像素，所以导致canvas的坐标系也平移了150，从而让下面旋转的时候会沿着新的坐标系的原点进行旋转
},500);

来源：oschina

链接：https://my.oschina.net/u/4369994/blog/4870698