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 {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 background: #999; height: 100%;
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 oCan.arc( 250 , 250 , 100 , 0 , 360 * Math.PI / 180 , false ); /* 现在的基准点是 canvas画布的顶点(0,0),所以在调用arc()坐标点是(250,250) */
28 /*
29 上面写法的替代方法:
30 oCan.translate(250,250); // 这种方法和上面方法还是有不同的,这种方法是将整个画布的起始点全部移动到(250,250)位置,儿上面的只是在(250,250)的位置画个圆
31 oCan.arc( 0 , 0 , 100 , 0 , 360 * Math.PI / 180 , false );
32
33 */
34 oCan.lineWidth = 1;
35 oCan.strokeStyle = '#F00';
36 oCan.stroke();
37 oCan.closePath();
38 } );
39 function getId( id ){
40 return document.getElementById( id );
41 }
42 </script>
43 </head>
44 <body>
45 <canvas id='can' width='500' height='500'>您的浏览器版本过低,请您更换浏览器以获取更好的用户体验...</canvas>
46 </body>
47 </html>