HTML5 preview切换布局 <!doctype html> <html> <head> <meta charset=utf-8> <title>HTML5 canvas demo</title> <script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script> <!--script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.js"></script--> <!--script src="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"--> <style> p {font-family: monospace;} </style> </head> <body> <p>Canvas pane goes here:</p> <canvas id=pane width=300 height=200></canvas> <script> var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50); </script> </body> </html>