围棋盘有19X19交叉点,是个正方形,有9个特殊交叉点需要标记,最中间的叫"天元".
先画38条线,然后再特殊点画填充圆点.这两个用到的api主要有moveTo,lineTo,arc,retc
棋盘线外围的区域是canvas元素的padding:20px,背景色是设置的css
如果在(0,0)(10,10)点画一条厚度为3的正方形,那么会发现正方形的上边和左边比右边和底边要细,似乎是3的一半
确实也是一半,还有一半跑到画布外面了.如果调整一个起点,例如(3,3)(10,10),那么可以发现canvas在画线时是以
坐标点为中心线的.例如(0,0)(0,10)这条线,且厚度为3,那么以这条线为中轴,左边1.5右边1.5,就是3.那么,左边
这部分已经跑到画布外面去了(坐标是[-1.5,0][-1.5,10]),显示不出来,只剩下右边的1.5了,所以看起来只有一半
这个相对简单些,通过观察,这些点位置是3,9,15这个序列,一共9个点,后面数是前数加6.可以双层循环[1~6],3*i
可以满足这个序列,但要排除i为偶数的时候.
10行9列,画法上与围棋盘一样.有楚河汉界,那一行不能贯穿竖线,所以竖线分两次画了
砲和兵的交叉点周围画上4个直角,这用到了变换坐标原点(translate)和旋转画布(rotate).
砲交叉点左上角画一个直角计算下坐标,如果以这交叉点为新原点,然后逆90度转动画布,此时,转动前位于交叉点右上角位置,
现在又到了左上角,这样可以直接再画一次左上角的直角而不必重新计算坐标.同理,转180度时,交叉点右下角位置又会出
现在左上角,转270度时,左下角位置会出现在左上角.这样一样,只需要计算一次左上角的坐标,旋转3次坐标系即可在交叉
点四个位置上画上直角.
九宫格斜线和楚河汉界也用到坐标原点重置,这个能避免很多的坐标计算,基本想法就是只计算参照点坐标,然后以这坐标为新原
点.通过坐标重置和坐标旋转,能简化很多复杂的坐标计算,由于是以参照点为原点,所以参照点将成为(0,0)点,其它坐标将基于
这个原点计算简化很多,坐标系变换大概是高中时学习过的数学课程.
这个更简单些,是由64个小正方形组成的,可以用fillRect直接填充矩形.没有边框线和内线
黑白的方块交替,每一行起始颜色不同.第1行是黑色起,第2行是白色起.在双重循环时,每一行循环后要修改下交替变量.