canvas笔记

canvas笔记

TOC

重要公式

  1. 1弧度 = (∏ / 180)度
  2. 1度 = (180 / ∏)弧度 
  3. =X×11000×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();
阅读更多
文章标签: canvas
个人分类: js
想对作者说点什么? 我来说一句

canvas学习

2017年11月22日 16KB 下载

没有更多推荐了,返回首页

不良信息举报

canvas笔记

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭