canvas笔记

canvas笔记

TOC

• 重要公式
• 坐标系统
  
  • 浏览器坐标转换成canvas坐标
  • canvas坐标变换
  • 案例

重要公式

1. 1弧度 = (∏ / 180)度
2. 1度 = (180 / ∏)弧度　
3. $\dfrac{像素}{帧} = \dfrac{X毫秒}{帧}\times\dfrac{1秒}{1000毫秒}\times\dfrac{Y像素}{秒}$

坐标系统

浏览器坐标转换成canvas坐标

function windowToCanvas(x, y) {
   var bbox = canvas.getBoundingClientRect();
   return { x: (x - bbox.left) * (canvas.width  / bbox.width),
            y: (y - bbox.top)  * (canvas.height / bbox.height) };
}

canvas坐标变换

用于坐标变量的通用等式

    x' = ax + cy + e;
    y' = bx + dy + f;

    x' = cos(angle) * x - sin(angle) * y + dx;
    y' = sin(angle) * x + cos(angle) * y + dy;

    a = cos(angle);
    b = sin(angle);
    c = sin(angle);
    d = cos(angle);
    e = dx;
    f = dy;

方案一：用transform方法变换
对应的canvas的transform方法参数:
- 平移：与 e, f 重点内容 有关
- 缩放 : 与 a, d 有关
- 旋转 : 与 a, b, c, d有关

context.transform(a, b, c, d, e, f);

方案二：直接变换坐标

// 高级坐标旋转
// 已知旋转角度(rotation), 当前坐标(x, y), 求旋转后的坐标(x', y')
x' = (x - centerX) * cos(rotation) - (y - centerY) * sin(rotation)
y' = (y - centerY) * cos(rotation) + (x - centerX) * sin(rotation)

案例

第一个transform方法，先对坐标系原点x, y方向上平移100像素, 再在平移后的坐标系原点处放大2倍。
第二个transform方法, 在放大2倍坐标系的基础上将坐标系延x, y方向各平移 -50， -25像素。浏览

    context.save();
    context.fillStyle = fill;
    context.transform(2, 0, 0, 2, 100, 100);
    context.transform(1, 0, 0, 1, -50, -25);
    context.fillRect(0,0,100,50);
    context.restore();