自学canvas之旅(1)

预计学习
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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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

最后,由于中考时间紧张问题,
今天暂时学这么多,剩下的以后再学。
一首平凡之路送给自己!

        


满分是10分的话,这篇文章你给几分,您的支持将鼓励我继续创作!