用canvas作图的坐标系-HMTL5的第一次尝试 _Web前端

用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/