关闭

canvas笔记

标签: canvas
190人阅读 评论(0) 收藏 举报
分类:

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();
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:31622次
    • 积分:864
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条