canvas相关问题

参考书: <<H5核心技术图形动画与游戏开发(David Geary)>>

画布尺寸

4页

canvas使用style="width:500px"设置和在元素上设置width=500,效果不一样.

因为元素有两套尺寸,一个是canvas元素尺寸,一个是绘图表面尺寸.使用style时,只修改元素尺寸.使用width时,都修改了

何时修改尺寸,例如下述代码.要先修改尺寸,再设置其它属性比如字体之类的.否则结果可能意想不到.

ctx.canvas.width = 600;
    ctx.font = '16px serial';

默认坐标系统

46页

以左上角为顶点,向右为X轴,向下为Y轴,默认大小为 300 X 150

物体碰撞

42页

当某个运动的物体同某个静止的物体发生碰撞时,如果我们需要让运动的物体被静止物体弹开....,通过计算两个向量的点积

43页

等式推导,用于编程时未知的量

HSL颜色值

51页

类似rgb(红,绿,蓝),hsl在表示形式上也是这种,hsl(颜色,饱和度,亮度).颜色值在一个圆形的区域中选择,0(360)度,表示红色,120度是绿色,240是蓝色

饱和度范围(100%~0),亮度范围(100%~0),这种颜色格式有点像调整显示器的饱和度和亮度.

HSB颜色值

<<设计配色基础>> 28页 色相环.

H(Hue)是色相,S(Saturation)是饱和度(Brightness)是透明度.这个方案和HSL原理类似,选一个色相,再调整浓度和透明度.

下图的色相环用于说明颜色是由3种基本颜色组成的,(可见)光的3原色:红绿蓝.不是书中的3基色(红黄蓝).使用的是RGB颜色值.

3原色相邻叠加得到的6色,再叠加得到12色,类推可以得到有限个颜色.

以下的叠加方法是:将相邻的颜色的RGB值相加再除以2.

例如:红色#FF0000绿色#00ff00,(R+R)/2 (G+G)/2 (B+B)/2,先得到#FFFF00,除以2得到#808000