【坐标变换】
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 id='mycanvas' width="300" height="200">
</canvas>
2.CSS方式设置,CSS“行内样式”设定:
设置canvas元素的style属性的width和height值
<canvas id="mycanvas" style="width:300;height:200">
</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);