【多媒体学习5】

【坐标变换】

1.旋转：rotate(double angleInRadians)，按照给定的角度来旋转坐标系（弧度制），正顺，负逆

2.缩放：scale(double x,double y)，在x与y方向上分别按照给定的数值来缩放坐标系

3.平移：translate(double x,double y),将坐标系平移到X,Y坐标处

4.直接设置变换矩阵：

context.transform(a,b,c,d,e,f):在当前变换矩阵基础上左乘Mn

context.setTransform(a,b,c,d,e,f):重置为Mn矩阵

5.canvas中的坐标变换的操作变换限定在一些语句中：

context.save()

context.restore();

【坐标系统】

页面坐标系，canvas本身的坐标系，drawing surface坐标系

1.页面显示的是canvas元素本身（默认为context-box部分）

2.代码中设定的绘制坐标是针对drawing surface 的坐标

3.当drawing surface 的尺寸与canvas 元素本身的尺寸不一致，浏览器缩放drawing surface 使之符合后者

4.为context-box框表，即将他放置于含padding.border的边框盒内

5.默认canvas坐标系统，以canvas的左上角为原点，x坐标向右方向增长，而y坐标则向右下方向延伸

6.js中设定的绘制坐标针对context-box区域

7.context-box的位置可借助于边框盒（含padding，border）的位置计算

8.确定context-box的位置（边框盒尺寸）

获取边框盒(返回局部坐标系的原点)：var bbox=canvas.getBoundingClientRect();

边框盒左上角坐标：var bboxLeft=bbox.left;var bboxTop=bbox.top;

边框盒大小：宽bbox.width,高bbox.height

9. border ,padding尺寸

利用css属性获取：

var style=window.getComputedStyle(mycanvas);

borderLeft=style.borderLeft;

borderTop=style.borderTop;

paddingLeft=style.paddingLeft;

paddingTop=style.paddingTop;

【canvas尺寸设置】

1.设置canvas元素的width和height属性

</canvas>

2.CSS方式设置，CSS“行内样式”设定：

设置canvas元素的style属性的width和height值

</canvas>

【鼠标坐标转换为canvas坐标】

function windowToCanvas(x,y){
    //鼠标坐标转换为canvas坐标，获取所需要数值的相关代码
    return{
        x:(x-bbox.left-borderLeft-paddingLeft)*(canvas.width/bbox.width),
        y:(y-bbox.top-borderTop-paddingTop)*(canvas.height/bbox.height)
    };
}
//调用：
loc =windowToCanvas(e.clientX,e.clientY);

猜你喜欢