canvas学习笔记5 绘制圆弧2
这个方法可以这样理解。绘制的弧形是由两条切线所决定。
第 1 条切线：起始点和控制点1决定的直线。
第 2 条切线：控制点1 和控制点2决定的直线。
其实绘制的圆弧就是与这两条直线相切的圆弧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆弧</title>
</head>
<style type="text/css">
canvas{
border:1px solid blue;
}
</style>
<body>
<div>绘制圆弧的方法2</div>
<canvas id="radian" width="300" height="300"></canvas>
</body>
<script type="text/jscript">
// 自调用函数
(function draw(){
//1、获取页面中canvas元素
var canvas = document.getElementById("radian")
//2、判断是否能常见canvas对象，如果不能就直接return出去
if(!canvas.getContext) return;
//3、创建canvas对象
var ctx=canvas.getContext("2d")
//4、绘制路径
ctx.beginPath()
//5、设置圆弧的起点位置
ctx.moveTo(50,50)
//6、绘制圆弧的参数200,50表示从起点50,50，
// 到第一个控制点200,50。200,200表示从第一个控制点到第二个控制点
ctx.arcTo(200,50,200,200,100)
//7、绘制两条直线 200,200表示终点
ctx.lineTo(200,200);
ctx.stroke();
})()
</script>
</html>
