绘制弧度

1. 基本概念
   角度：一个圆360度，一个半圆是180度
   弧度：一个圆2Π，一个半圆Π
2. 角度转换弧度
   弧度 = 角度 × Π / 180
3. 弧度转换角度
   角度 = 弧度 × 180 / Π

/* context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]); */
/* (圆心x，圆心y，半径，开启弧度，结束弧度，可选参数false/true) */
// false顺时针，true逆时针

绘制文字

// 设置字体
oCtx.font = "50px 微软雅黑";
// 垂直对齐方式
oCtx.textBaseline = “middle”;  // top buttom middle
// 水平对齐方式
oCtx.textAlign = "center";  // start end center

oCtx.strokeText("字符串", 默认左下角x， 默认左下角y);
oCtx.fillText("字符串", 默认左下角x， 默认左下角y);

绘制图片

// 加载图片
let oImg = new Image();
// 监听图片加载，为了避免图片已经加载好了才执行这个函数而漏掉监听，要写在前面
oImg.onliad = function() {
    // 绘制图片。三个参数，五个参数，九个参数
    oCtx.drawImage();
};
oImg.src = "img/img.jpg";

oCtx.drawImage();

1. 三个参数：

• 图片
• 左上位置x，左上位置y

2. 五个参数：

• 图片
• 左上位置x，左上位置y
• 拉伸图片宽度，拉伸图片高度

3. 九个参数：

• 图片
• 原始图片上的位置x，原始图片上的位置y
• 从原始图片指定位置截取宽度，从原始图片指定位置截取高度
• 左上位置x，左上位置y,
• 拉伸图片宽度，拉伸图片高度

绘制动画

let oImg = new Image();
oImg.onload = function() {
    // 计算每一张图片的宽高
    let imageWidth = oImg.width;
    let imageHeight = oImg.height;
    let personWidth = imageWidth / 4;
    let personHeight = imageHeight / 4;
    // 计算绘制的位置
    let canvasWidth = oCtx.canvas.width;
    let canvasHeight = oCtx.canvas.height;
    let originX = canvasWidth / 2;
    let originY = canvasHeight / 2;
    // 绘制图片
    oCtx.drawImage(oImg, 0, personHeight * 2, personWidth, personHeight, originX, originY, personWidth, personHeight);
    // 实现逐帧动画
    let index = 0;
    setInterval(function () {
        oCtx.clearRect(0, 0, canvasWidth, canvasHeight);
        oCtx.drawImage(oImg, index*personWidth, personHeight * 2, personWidth, personHeight, originX, originY, personWidth, personHeight);
        index++;
        if(index > 3)  index = 0;
    })
}
oImg.src = "img/person.jpg"

平移、旋转、缩放

注意点：在canvas中所有的形变属性操作的都是坐标系，而不是图形本身

1. 平移

oCtx.translate(100, 0);
oCtx.strokeRect(100, 100, 200, 100);

2. 旋转

oCtx.rotate(Math.PI/6);
oCtx.strokeRect(100, 100, 200, 100);

3. 缩放

oCtx.scale(0.5, 1);
oCtx.strokeRect(100, 100, 200, 100);

图形交互

// 1. 拿到canvas
let oCanvas = document.querySelector("canvas");
// 2. 从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 3. 绘制矩形
let rectX = 100;
let rectY = 100;
let rectWidth = 100;
let rectHeight = 100;
oCtx.rect(rectX, rectY, rectWidth, rectHeight);
oCtx.fill();
// 4. 添加点击事件
oCanvas.onclick = function(event){
    let x = event.offsetX;
    let y = event.offsetY;
    if(x >= rectX && x <= rectX + rectWidth &&
      y >= rectY && y <= rectY + rectHeight){
          console.log("矩形被点击了");
    }
    else{
        console.log("矩形没有被点击");
    }
}

方式2

• 如果没有开启新路径，所有图形内部点击都返回true，否则返回false
• 如果开启了一个新的路径，那么判断的就是点是否在新的路径的图形中

oCtx.isPointInPath(x, y);  

解决图形交互的框架有：
zrender.js、Knova.js、three.js、egret.js、pixi.js