效果如下:
// 代码如下:
<body>
<canvas width="500" height="375" id="c"></canvas>
<script>
(function draw_a() {
var a_canvas = document.getElementById("c");
var context = a_canvas.getContext("2d");
for( var x= 0.5; x < 500; x += 10){
context.moveTo(x, 0);
context.lineTo(x, 375);
}
for( var y= 0.5; y< 375; y += 10){
context.moveTo(0, y);
context.lineTo(500, y);
}
context.strokeStyle ="#eee";
context.stroke();
context.beginPath();
context.moveTo(0,40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);
context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);
context.strokeStyle="#000";
context.stroke();
context.font = "bold 1.2em sans-serif";
context.fillText("x", 244, 46);
context.fillText("y", 55, 165);
context.font = "bold 0.5em sans-serif";
context.fillText("(0, 0)", 35, 35);
context.fillText("(500, 375)",460, 370);
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);
})();
</script>
</body>
参考 《HTML5揭秘》 P63~P65