预计学习
getContext()，
beginPath()，
moveTo()，
lineTo()，
closePath()，
stroke()
画点线！
1.空HTML模板
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代码如下：
2
3
var c = cv.getContext("2d");//获取对象，听说暂时只有2d
3.画点
2
3
4
c.moveTo(100,100);//把画笔移至(100,100)的位置
c.lineTo(101,101);//画笔终点坐标
c.stroke();//开始按照上面定义的路径画
至此，点已经画完了，如下图：
4.画线
2
3
4
5
6
7
8
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.本次旅程的代码
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
最后，由于中考时间紧张问题，
今天暂时学这么多，剩下的以后再学。
一首平凡之路送给自己！
平凡之路
00:00 / 00:00
An audio error has occurred.
- 1 平凡之路
Be the first person to leave a comment!