<!DOCTYPE html> <html> <head lang="en"> <title></title> <meta charset="utf-8"> </head> <body> <h2>绘图入门</h2> <canvas id="mc" width="300" height="180" style="border:1px solid black"></canvas> <script type="text/javascript"> /*获取绘图DOM对象*/ var canvas = document.getElementById("mc"); /*获取绘图 CanvasRenderingContext2D对象*/ var ctx = canvas.getContext("2d"); /*设置填充颜色*/ ctx.fillStyle = "#f00"; /*绘制矩形*/ ctx.fillRect(30,40,80,100); </script> </body> </html>
以上案例比较简单，实际上可以绘制很复杂的图像