<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="https://r01.uzaicdn.com/content/v1/styles/subject.css"> <link href="https://www.jb51.net/styles/lianxi.css"> <script src="https://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="https://www.jb51.net/scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.fillRect(25,25,100,100);//绘制一个填充的矩形 ctx.clearRect(45,45,60,60);//清除指定矩形区域，让清除部分完全透明 ctx.strokeRect(50,50,50,50); //绘制一个矩形的边框 }else{ alert('当前浏览器不支持，请更换浏览器'); } } draw(); } </script> </head> <body> <canvas>当前浏览器不支持，请更换浏览器</canvas> </body> </html>
6.绘制文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="https://r01.uzaicdn.com/content/v1/styles/subject.css"> <link href="https://www.jb51.net/styles/lianxi.css"> <script src="https://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="https://www.jb51.net/scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); }else{ alert('当前浏览器不支持，请更换浏览器'); } } draw(); } </script> </head> <body> <canvas>当前浏览器不支持，请更换浏览器</canvas> </body> </html>