预计学习
getContext(),
beginPath(),
moveTo(),
lineTo(),
closePath(),
stroke()
画点线!
1.空HTML模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>canvas</title>
<style>
#test{
border:2px solid black;
}
</style>
</head>
<body>
<canvas id="test" width="800" height="500">听说你本来是应该看不到我的!哈哈哈!</canvas>
<script>
</script>
</body>
</html>OK,除了js部分没写,算是可以的了,
至于为啥没写重复的js,当然是为了蹭熟练度啦!
2.获取画布
没错,不是copy一下,画布就给你了。
我们还要获取画布!
js代码如下:
1
2
3 var cv = document.getElementById("test");//获取画布元素
var c = cv.getContext("2d");//获取对象,听说暂时只有2d
3.画点
1
2
3
4 c.beginPath();//起始或重置路径,按照我的理解,应该就是画线前的准备
c.moveTo(100,100);//把画笔移至(100,100)的位置
c.lineTo(101,101);//画笔终点坐标
c.stroke();//开始按照上面定义的路径画
至此,点已经画完了,如下图:
4.画线
1
2
3
4
5
6
7
8 c.beginPath();
c.moveTo(100,100);
c.lineTo(100,200);//竖线
c.moveTo(120,100);
c.lineTo(200,100);//横线
c.moveTo(120,300);
c.lineTo(300,100);//斜线
c.stroke();
如图:
可以看到,稍稍改变坐标就是画线,横线竖线斜线都有!
5.本次旅程的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<title>canvas</title>
<style>
#test{
border:2px solid black;
}
</style>
</head>
<body>
<canvas id="test" width="800" height="500">听说你本来是应该看不到我的!哈哈哈!</canvas>
<script>
var cv = document.getElementById("test");//获取画布元素
var c = cv.getContext("2d");//获取对象,听说暂时只有2d
c.beginPath();//起始或重置路径,按照我的理解,应该就是画线前的准备
c.moveTo(50,50);//把画笔移至(100,100)的位置
c.lineTo(51,51);//画笔终点坐标
c.stroke();//开始按照上面定义的路径画
c.beginPath();
c.moveTo(100,100);
c.lineTo(100,200);//竖线
c.moveTo(120,100);
c.lineTo(200,100);//横线
c.moveTo(120,300);
c.lineTo(300,100);//斜线
c.stroke();
</script>
</body>
</html>
6.END
最后,由于中考时间紧张问题,
今天暂时学这么多,剩下的以后再学。
一首平凡之路送给自己!