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}
网友评论