用canvas绘制的坐标系-HMTL5的第一次尝试
?
仿照《HTML5揭秘》的一个案例，用canvas绘制了一个坐标系。
内容包括：
一组垂直的银色直线；一组水平的银色直线；两段水平的黑色直线；两段黑色直线形成一个箭头；两段垂直的黑色直线；两段黑色直线形成了另外一个箭头；字母“x”和“y”；左上角和右下角的坐标“（0,0）”和“（500,300）”；左上角和右下角的矩形；中间的“Markpoor's blog：”和“www.markpoor.com”；
源代码：
<!DOCTYPE html><html lang="zh"><meta charset="utf=8"><body><canvas id="firstcanvas" width="500" height="300" style="border:1px solid #c3c3c3">您的浏览器不支持canvas标签，请改为最新版本的chrome，firefox或Opera浏览器</canvas><script type="text/javascript">var cvs=document.getElementById("firstcanvas");var context=cvs.getContext("2d");for(var x=0.5;x<500;x+=10){context.moveTo(x,0);context.lineTo(x,300);}for(var y=0.5;y<300;y+=10){context.moveTo(0,y);context.lineTo(500,y);}context.strokeStyle="silver";context.stroke();context.beginPath();context.moveTo(40,0);context.lineTo(40,140);context.moveTo(40,160);context.lineTo(40,300);context.moveTo(30,290);context.lineTo(40,300);context.lineTo(50,290);context.moveTo(0,30);context.lineTo(240,30);context.moveTo(260,30);context.lineTo(500,30);context.moveTo(490,20);context.lineTo(500,30);context.lineTo(490,40);context.strokeStyle="black";context.stroke();context.fillRect(0,0,5,5);context.fillRect(495,295,5,5);context.font="bold 20px sans-serif";context.textAlign="middle";context.fillText("x",248,35);context.fillText("y",35,150);context.textBaseline="top";context.fillText("(0,0)",8,5);context.textAlign="right";context.textBaseline="buttom";context.fillText("(500,300)",480,280);context.font="宋体 20px";context.fillStyle= "lightblue";context.fillText("Markpoor' blog:",400,140);context.fillText("www.markpoor.com",400,170)</script></body></html>演示地址：www.markpoor.com/html5/draw-coordinate-system-with-canvas/