［零基础学HTML5］第二课.拓展 画曲线的三种姿势
围棋新人吧
全部回复
仅看楼主
level 13
JohnYe3333 楼主
这一节课原本是安排在第二节课之后的，但是发生了一些理解上的问题，所以拖到今天，直至完全理解了之后才帖出来。
2016年04月04日 00点04分 1
level 13
JohnYe3333 楼主
先看quadraticCurveTo方法，这是最后研究出来的，也是最好用的一种。
先看三行代码：
context.moveTo(0,200);
context.quadraticCurveTo(200,0,400,200);
context.stroke();
这三行代码的意思是说：
在起点（0，200）和终点（400，200）之间画一条曲线，曲线的高度由点（200，0）调节。
我们把这三行代码放在一个矩形背景下看看效果：
2016年04月04日 00点04分 2
level 13
JohnYe3333 楼主
全部代码如下：
－－－－－－－－
<!DOCTYPE html>
<html>
<head>
<title>lesson 2</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="testcanvas" width="800" height="400"></canvas>
<script>
canvas = document.getElementById('testcanvas');
context = canvas.getContext('2d');
context.fillStyle = "#f0f";
context.fillRect(0,0,400,200);
context.lineWidth = 5;
context.moveTo(0,200);
context.quadraticCurveTo(200,0,400,200);
context.strokeStyle = "#0f0";
context.stroke();
</script>
</body>
</html>
－－－－－－－－
2016年04月04日 00点04分 3
level 13
JohnYe3333 楼主
注意我们为了demo的需要，把线宽度设成5个点了（lineWidth=5）。同时把线条的颜色(
#0f0)和背景的颜色（#
f0f）设成了对比色。
2016年04月04日 00点04分 4
level 13
JohnYe3333 楼主
下面再看看，如果我们把控制点的位置调整下，会发生什么变化。
黄色的这条线就是由控制点（200，100）画出来的。
2016年04月04日 00点04分 5
level 13
JohnYe3333 楼主
相关代码如下：
context.beginPath();
context.moveTo(0,200);
context.quadraticCurveTo(200,100,400,200);
context.strokeStyle = "#ff0";
context.stroke();
2016年04月04日 00点04分 6
level 13
JohnYe3333 楼主
现在来看看arc方法。
2016年04月04日 00点04分 8
level 13
JohnYe3333 楼主
我们上一节课学过arc方法，其第四、第五个参数用来表征起始、终止角度，如果这两个角度不是0到360度的话，它可以用来表征一条曲线。
2016年04月04日 00点04分 9
level 13
JohnYe3333 楼主
例如，我们在（0，200）和（400，200）这两个点之间画一条曲线，为简单起见，我们指定两个角度为45度和－45度，这样圆心的位置是（(0+400)/2，(200+200)）=（200,400），圆的半径为200乘以根号2，画图的方向为从右向左（逆时针）。
context.arc(200,400,200*Math.SQRT2,Math.PI/4,Math.PI*7/4,false);
效果如下：
2016年04月04日 00点04分 10
level 13
JohnYe3333 楼主
关键代码如下：
context.fillStyle = "#f0f";
context.fillRect(0,0,400,200);
context.lineWidth = 5;
context.strokeStyle = "#0f0";
r = 200*Math.SQRT2;
context.arc(200,400,r,Math.PI/4,Math.PI*7/4,false);
context.stroke();
2016年04月04日 00点04分 11
level 13
JohnYe3333 楼主
看起来好像方法还不错，其实非常地不直观。
比如说，我想把曲线压扁点，就折腾了许久，又是计算角度，又是计算圆心的，最后出来的效果还不满意。
总之，这一种方法可能适合于程序猿（通过程序计算相关参数），一定不适合大多数网页编辑和设计师。
2016年04月04日 00点04分 12
level 13
JohnYe3333 楼主
最后看看arcTo方法。
2016年04月04日 00点04分 13
level 13
JohnYe3333 楼主
这是一个我一眼之下觉得能用的方法，结果还是不方便使用。
2016年04月04日 00点04分 14
level 13
JohnYe3333 楼主
先来看看研究出来的结果：
context.moveTo(0,200);
context.arcTo(200,0,400,200,283);
对于相关参数的解释：我心目中的期望是：起点（0，200），控制点（200，0），终点（400，200），半径283。
反复测试的结果是：我的理解错了。
2016年04月04日 00点04分 15
level 13
JohnYe3333 楼主
效果图：
2016年04月04日 00点04分 16
1 2 尾页