<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画布(Canvas)测试</title> </head> <body> <h2>画布(Canvas)测试</h2> <canvas id="miCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas> <script type="text/javascript"> var c = document.getElementById("miCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); // 画圆 // arc(x,y,r,start,stop) ctx.arc(100, 50, 30, 0, 2*Math.PI); ctx.stroke(); // 文本 ctx.font = "30px Arial"; // fillText(text,x,y) ctx.fillText("hi, jzh", 10, 50); </script> </body> </html>