1 <!DOCTYPE html>
2 <html lang='zh-cn'>
3 <head>
4 <title>Insert you title</title>
5 <meta name='description' content='this is my page'>
6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
10 <style type='text/css'>
11 html,body,canvas {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 background: #999;
17 }
18
19 #can {
20 background: #FFF; display: block; margin: 75px auto; border-radius: 2px;
21 }
22 </style>
23 <script type='text/javascript'>
24 $( function(){
25 var oCan = $( '#can' ).get( 0 ).getContext( '2d' );
26 oCan.beginPath();
27 /*
28
29 绘制曲线(圆形曲线):
30 oCan.arcTo(x1,y1,x2,y2,r) W3C解释 : 在画布上创建介于两个切线之间的弧： 起点坐标 1, 终点坐标 2, 半径(调整半径可达到不同效果)
31 这里有几个问题需要解决:
32 一:
33 为什么在不设置 oCan.moveTo(),只设置oCan.arcTo()的时候,是画不出来曲线的?
34 二:
35 为什么我们在设置的坐标点的时候,看不懂他是怎么画出来这个圆呢?
36
37 绘制曲线二(弧形曲线):
38 oCan.quadraticCurveTo(); W3C 二次方曲线 (绘制一条二次贝塞尔曲线：)
39 定义和用法
40 quadraticCurveTo(dx,dy,x1,y1) 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。 dx,dy :控制点 x1,y1 结束坐标
41 提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，
42 那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
43
44 绘制曲线三(S型曲线):
45 定义和用法
46 bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1) 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。 dx,dy :控制点 x1,y1 结束坐标
47 提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，
48 那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
49
51 */
52 /*
53
54 // 使用arcTo来创建曲线
55 oCan.moveTo( 250 , 250 ); //创建开始点
56 oCan.arcTo( 100 , 300 , 50 , 150 , 50 );
57 oCan.arc( 250 , 250 , 2 , 0 , 2 * Math.PI , true ); // 辅助
58 oCan.arc( 100 , 300 , 2 , 0 , 2 * Math.PI , true ); // 辅助
59 oCan.arc( 50 , 150 , 2 , 0 , 2 * Math.PI , true ); // 辅助
60 oCan.closePath();
61 oCan.stroke();
62
63 */
64
65 /*
66
67 // 使用quadraticCurveTo来创建曲线
68 oCan.moveTo( 250 , 250 ); /* 创建开始点
69 oCan.quadraticCurveTo( 100 , 300 , 50 , 150 ); // 画出的曲线大小和控制点有直接关系,可以调整控制点的坐标来进行查看(曲线就是两个切线之间的弧)
70 oCan.arc( 250 , 250 , 2 , 0 , 2 * Math.PI , true ); // 辅助
71 oCan.arc( 100 , 300 , 2 , 0 , 2 * Math.PI , true ); // 辅助
72 oCan.arc( 50 , 150 , 2 , 0 , 2 * Math.PI , true ); // 辅助
73 oCan.closePath();
74 oCan.stroke();
75
76 */
77
78 // 使用bezierCurveTo来创建曲线
79 oCan.moveTo( 250 , 250 ); // 创建开始点
80 oCan.bezierCurveTo( 150 , 300 , 450 , 350 , 50 , 500 );
81 oCan.arc( 250 , 250 , 2 , 0 , 2 * Math.PI , true ); // 辅助
82 oCan.arc( 150 , 300 , 2 , 0 , 2 * Math.PI , true ); // 辅助
83 oCan.arc( 450 , 350 , 2 , 0 , 2 * Math.PI , true ); // 辅助
84 oCan.arc( 50 , 500 , 2 , 0 , 2 * Math.PI , true ); // 辅助
85 oCan.stroke();
86 oCan.closePath();
87 } );
88 </script>
89 </head>
90 <body>
91 <canvas id='can' width='500' height='500'>您的浏览器版本过低,请升级您的浏览器...</canvas>
92 </body>
93 </html>