开始学习html5的canvas 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>A basic HTML5 blog homepage</title>
 6     <!--<style type="text/css">
 7     body{font: bold 12px/2 "微软雅黑";color:#cd06a7;}
 8     </style>-->
 9 </head>
10 <body>
11     <canvas id="myCanvas" width="700" height="700">
12         
13     </canvas>
14 
15     <input type="checkbox" checked="" />
16 
17     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
18     
19     <script type="text/javascript">
20     $(function(){
21         var canvas = $("#myCanvas");
22         var context = canvas.get(0).getContext("2d");
23         console.log(context);
24         context.fillStyle = "rgb(255, 0, 0)";
25         context.fillRect(40, 40, 100, 100);// 矩形
26         context.fillStyle = "rgb(0, 0, 0)";
27         context.lineWidth = 20;
28         context.strokeRect(120,120,100,200);// 矩形边框
29 
30         // 绘制线条
31         context.lineWidth = 5; // 加粗线条
32         context.beginPath(); // 开始路径
33         context.moveTo(40,40); // 设置路径远点
34         context.lineTo(340, 340);// 设置路径终点
35         context.closePath();    // 结束路径
36         context.strokeStyle = "rgb(255, 0, 0)";
37         context.stroke(); // 绘出路径轮廓
38 
39         // 绘制圆形
40         context.beginPath();
41         context.arc(230, 90, 50, 0, Math.PI/2, true);//绘制一个圆形 false逆时针 true 没有变化
42         context.closePath();
43         context.fill();    // 填充路径 跟 stroke相似
44 
45         // 文本
46         var text = "Hello, world!";
47         context.font = "italic 30px serif"; // 修改字号和字体
48         context.fillText(text, 40,40);
49         context.font = "italic 60px serif"; // 修改字号和字体
50         context.strokeText(text, 200, 200); // 描边文本
51 
52         
53         
54 
55         context.beginPath();
56         context.arc(240,240, 50, 0, Math.PI * 2, false);
57         context.closePath();
58         context.fill();
59         context.clearRect(240,240,50,50);
60 
61         // 擦除Canvas
62         context.clearRect(0,0,canvas.width(),canvas.height());
63 
64         canvas.attr("width",canvas.width());
65         canvas.attr("height",canvas.height());
66 
67         context.fillRect(40, 40, 100, 100);// 矩形
68         context.strokeRect(120,120,100,200);// 矩形边框
69     })
70     </script>
71 </body>
72 </html>

 

posted @ 2013-10-26 15:18  楚玉  阅读(198)  评论(0)  编辑  收藏  举报