canvas是HTML5的新特性,我们可以用它来轻松地画一个矩形
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用canvas画矩形</title> <style> </style> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script type="text/javascript"> function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象 context.fillStyle = "blue"; // 设置或返回用于填充绘画的颜色、渐变或模式 context.fillRect(50,50,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形 } draw("canvas"); </script> </body> </html>以上代码是有填充的矩形。
我们也可以用canvas来画无填充的矩形
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用canvas画矩形</title> <style> </style> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script type="text/javascript"> function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象 context.strokeStyle = "#000"; //图形边框的填充颜色 context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形: context.strokeRect(50,50,180,120); //绘制矩形(无填充) context.strokeRect(110,110,180,120); } draw("canvas"); </script> </body> </html>
程序运行结果: