canvas demos
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> canvas{ border-color: black; border:1px solid; } </style> <script> function draw(){ var canvas = document.getElementById("mycanvas"); // //兼容性判断 // if(canvas.getContext){ // var ctx = canvas.getContext('2d'); // ctx.fillStyle = "rgba(200,0,0,1)";//填充颜色 // ctx.fillRect(10,10,55,50); // ctx.fillStyle = "rgba(0,0,200,0.5)"; // ctx.fillRect(30,30,55,50); // ctx.clearRect(20, 20, 50, 50); // ctx.strokeRect(50,50,50,50); // } if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } } </script> </head> <body onload="draw();"> <canvas width="450" height="450" id="mycanvas"> 浏览器版本太低不支持,请跟换或者升级浏览器。 </canvas> </body> </html>