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>
