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>