canvas 绘制图形：
注意： canvas 的宽高设置在行内，否则会使画布（canvas）产生扭曲，绘图变形；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #canvas { background: #3B5998; } </style> <script> window.onload = function () { // 画布 var c = document.getElementById("canvas"); /*获取上下文*/ var cxt = c.getContext("2d"); cxt.strokeStyle = "#09f";//线条的颜色； cxt.fillStyle= "#ff0000";//填充的颜色； // 画线条： // cxt.moveTo( 100, 100 ); //起始点 // cxt.lineTo( 300, 100 ); //终点； // cxt.stroke(); // 渲染出图形； // 画矩形; // 填充一个矩形； // cxt.fillRect( 50, 50, 300, 100 );//x, y, 宽， 高 // cxt.strokeStyle = "#09f"; // cxt.strokeRect( 50, 50, 300, 100 ); //空矩形 // 画圆： // true: 逆时针， false : 顺时针 // arc(x,y,半径，起始度数，终止读数) cxt.arc(200,200,50,0*Math.PI,Math.PI*2,true); // 绘制文本； // cxt. font = "80px Arial"; // 填充文本（实体） // cxt.fillText("这是文本", 50, 100); // 线条文本（空心） // cxt.strokeText("这是文本", 50, 100) // 绘制图画 // var img = new Image(); // img.src = "../image/1.jpg"; // 消除图片加载模糊的问题 // img.onload = function () { // cxt.drawImage(img, 100, 100, 200, 200 ); // } // 最后： 渲染出图案； // cxt.stroke();//空心的； cxt.fill();//填充的； } </script> </head> <body> <canvas id="canvas" width="400px" height="400px"> 请升级到ie9以上版本 </canvas> </body> </html>