<html> <head> <title>canvas绘制图形</title> <style> body{ margin: 0px; padding: 0px; } #mycanvas{ border: 1px solid #9c9898; } </style> <script type=text/javascript > window.onload=function(){ var ca=document.getElementById("mycanvas"); var context=ca.getContext("2d"); context.fillStyle="#ff0000"; context.fillRect(200,50,100,100); } </script> <body> <canvas id ="mycanvas" width="500" height="200"> 浏览器不支持 </canvas> </body> </head> </html>
绘制直线：
<html> <head> <title>canvas绘制图形</title> <style> body{ margin: 0px; padding: 0px; } #mycanvas{ border: 1px solid #9c9898; } </style> <script type=text/javascript > window.onload=function(){ var ca=document.getElementById("mycanvas"); var context=ca.getContext("2d"); context.beginPath(); context.moveTo(20, 220); context.lineTo(500,220); context.lineWidth=20; context.strokeStyle="#ff0000"; context.stroke(); } </script> <body> <canvas id ="mycanvas" width="500" height="300"> 浏览器不支持 </canvas> </body> </head> </html>
绘制曲线
