HTML5 基础教程三

我们接着之前的继续学习

1.斜接长度（就是一个角的内角与外角之间的距离）

以下为HTML5代码

1 <canvas id="sl1"></canvas>

以下为js代码

1 var obj = document.getElementById("sl1");
2 var gtx = obj.getContext("2d");
3 gtx.beginPath();
4 gtx.lineWidth = 10;
5 gtx.miterLimit = 5;
6 gtx.moveTo(20,20);
7 gtx.lineTo(100,50);
8 gtx.lineTo(20,30);
9 gtx.stroke();

miterLimit : 设置斜接的长度（为正数）

---

 

2.画矩形（二）

以下为HTML5代码

1 <canvas id="sl2"></canvas>

以下为js代码

1 var obj = document.getElementById("sl2");
2 var gtx = obj.getContext("2d");
3 gtx.strokeStyle = "#353";
4 gtx.rect(0,0,100,50);
5 gtx.stroke();

rect : 绘画矩形（不使用 stroke （无填充)或 fill (填充)则这个矩形是不会真实的绘画到网页上的）

---

 

3.清空一个矩形

以下为HTML5代码

1 <canvas id="sl3"></canvas>

以下为js代码

1 var obj = document.getElementById("sl3");
2 var gtx = obj.getContext("2d");
3 gtx.fillStyle = "#00f";
4 gtx.fillRect(0,0,100,100);
5 gtx.clearRect(0,0,30,30);

clearRect : 指定要清除的矩形区域（前两者为坐标,第三个为长度,第四个为高度）

这个功能你可以理解为是画图工具中的橡皮

---

4.画一个三角形

以下为HTML5代码

1 <canvas id="sl4"></canvas>

以下为js代码

 1 var obj = document.getElementById("sl4");
 2 var gtx = obj.getContext("2d");
 3 gtx.fillStyle = "red";
 4 gtx.strokeStyle = "blue";
 5 gtx.beginPath();
 6 gtx.moveTo(20,10);
 7 gtx.lineTo(20,90);
 8 gtx.lineTo(100,90);
 9 gtx.closePath();
10 gtx.stroke();
11 gtx.fill();

closePath : 就是将此时所处的点连接到 beginPath 的点，形成回路

---

5.在画布上剪切（就是让我们选定的区域显示,其他区域不显示）

以下为HTML5代码

1 <canvas id="sl5"></canvas>

以下为js代码

1 var obj = document.getElementById("sl5");
2 var gtx = obj.getContext("2d");
3 gtx.rect(0,0,40,40);
4 gtx.clip();
5 gtx.rect(0,0,100,100);
6 gtx.fillStyle = "red";
7 gtx.fill();

clip : 根据上面的 rect 所截取的矩形，规定画布中只有这部分矩形才可以显示,其他的部分不显示

---

6.二次贝塞尔曲线（不要被名字吓到，就是类似耐克标志的那个图形）

以下为HTML5代码

1 <canvas id="sl6"></canvas>

以下为js代码

1 var obj = document.getElementById("sl6");
2 var gtx = obj.getContext("2d");
3 gtx.strokeStlye = "red";
4 gtx.moveTo(20,20);
5 gtx.quadraticCurveTo(20,100,250,20);
6 gtx.stroke();

quadraticCurveTo :二次贝塞尔曲线（前两者为控制点坐标，后两个为结束点坐标）

当然这里有一句moveTo是控制它的开始点坐标的

---

7.三次贝塞尔曲线

以下为HTML5代码

1 <canvas id="sl7"></canvas>

以下为js代码

1 var obj = document.getElementById("sl7");
2 var gtx = obj.getContext("2d");
3 gtx.strokeStyle = "red";
4 gtx.moveTo(20,20);
5 gtx.bezierCurveTo(20,100,100,100,100,20);
6 gtx.stroke();

bezierCurveTo : 前两者为第一个控制点,第三个和第四个为第二个控制点,最后两个为结束点.

这里我还是使用了moveTo 控制它的起始点

---

8.圆形

以下为HTML5代码

1 <canvas id="sl8"></canvas>

以下为js代码

1 var obj = document.getElementById("sl8");
2 var gtx = obj.getContext("2d");
3 gtx.strokeStyle = "red";
4 gtx.arc(50,50,20,0,1.3*Math.PI);
5 gtx.stroke();

arc : 画圆（前两者为圆心坐标,第三个为圆的半径,第四个为圆的开始角度（弧度），第五个为结束角度（弧度））

---

 

9.两切线之间的弧/曲线

 以下为HTML5代码

1 <canvas id="sl9"></canvas>

以下为js代码

1 var obj = document.getElementById("sl8");
2 var gtx = obj.getContext("2d");
3 gtx.strokeStyle = "red";
4 gtx.moveTo(20,20);
5 gtx.lineTo(100,20);
6 gtx.arcTo(120,20,120,50,20);
7 gtx.lineTo(120,80);
8 gtx.stroke();

arcTo : 画两切线之间的弧/曲线（前两者为起始坐标点,第三个和第四个为结束点坐标,最后一个为该圆的半径）