我们接着之前的继续学习
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 : 画两切线之间的弧/曲线(前两者为起始坐标点,第三个和第四个为结束点坐标,最后一个为该圆的半径)