棋盘实现
2018-02-04 本文已影响0人
tency小七
canvas用于绘制图像（通过javascript)
html5中canvas元素仅仅是图像的容器，要通过getContext()方法来创建一个绘画的环境，以及其他命令来进行绘画。
-
html Dom中的getContext()方法
- 定义与用法
用于返回一个用于在画布上绘画的环境 - 参数
getContext('2d')
因为当前只有2d是合法的，此方法会返回一个环境对象，此对象会接入一个二维绘画的API。如果以后支持3D绘画，3d这个参数才可以使用。
-
beginPath()
- 定义与用法
定义起始路径或重置当前路径。
一般作为定义起始点之前的一个方法。要和closePath()相对应。
-
moveTo()
- 定义与用法
将路径移动到指定点。也就是在beginPath()之后，调用moveTo(0，0)，也就是将起始点移动到画布上的二维坐标(0,0)。
-
lineTo()
- 定义与用法
添加一个新点，在画布中创建从起始点到此新点的一条直线。
例如:
moveTo(0,0);lineTo(100,100)
其作用也就是在(0,0)和(100,100)连成一条直线。
-
stroke()
- 定义与用法
绘制定义路径。
例如:
moveTo(0,0);lineTo(100,100)
其作用也就是在(0,0)和(100,100)连成一条直线。但是如果没有stroke()方法的话，这条直线我们是看不到的。
-
fill()
- 定义与用法
填充内容。
stroke()是描边，fill()是填充。
使用chrome时，应该将绘制画布的<script>方法放在<body>标签中的<canvas></canvas>的下面。因为chrome需要文档载入完成之后才可以获得canvas对象。
onclick=fun(e)
- 点击事件里面有一个参数e，e也就代表了这个点击事件。
e对象中有很多变量，其中有一个offsetX,offsetY.
offsetX：鼠标指针位置相对于触发事件的对象的X坐标。
offsetY：鼠标指针位置相对于触发事件的对象的X坐标。
使用box-shadow时踩了一个坑！希望以后可以多多注意一下。主要是不要乱弄逗号。
- 定义与用法
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平阴影位置（必需）
v-shadow：垂直阴影位置 （必需）
spread:阴影尺寸
blur：模糊距离
inset：将默认外部阴影(outset)改为内部阴影 - 实例
div{box-shadow: 10px 10px 5px #888888;}
div{box-shadow: 10px 10px 5px #888888，10px 10px 5px #888888}
1.png
