无论您是新手，还是老手，本教程都值得一读。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>网格</title> <style> #c1{ border:1px solid black; } </style> <script> window.onload = function(){ var ocanvas = document.getelementbyid('c1') var gd = ocanvas.getcontext('2d') // 你要画一个表格： // 你得思考，每个格子多大！ var space = 20 // 1, 得到 画布的宽和高 var cwidth = gd.canvas.width; var cheight = gd.canvas.height; // 当你记不住api 的时候，就打印出来看看！ var lines = math.floor(cheight/space) var cols = math.floor(cwidth/space) for(let i = 0;i<lines;i++){ gd.beginpath() gd.moveto(0,space*i-0.5) gd.lineto(cwidth,space*i-0.5) gd.strokestyle='#aaa' gd.stroke(); } // 画第二个竖着的格子！ for(let j = 0; j<cols;j++){ gd.beginpath(); gd.moveto(space*j-0.5,0) gd.lineto(space*j-0.5,cheight) gd.strokestyle="#aaa" gd.stroke() } // 下面是画那个坐标！ // 1, everpadding（坐标离 网格边界的上下左右的距离！） var everpadding = 40 // 起点(坐标原点) var x0 = everpadding; var yo = cheight -everpadding // x 轴，终点： var x1 = cwidth-everpadding; // 竖着方向： // 画着再说： gd.beginpath(); gd.moveto(x0,yo) gd.lineto(x1,yo) gd.lineto(x1-space,yo-space) gd.lineto(x1-space,yo+space) gd.lineto(x1,yo) gd.strokestyle="red" gd.fillstyle="red" gd.stroke() gd.fill() gd.beginpath() gd.moveto(x0,yo) gd.lineto(x0,everpadding) gd.lineto(x0-space,everpadding+space) gd.lineto(x0+space,everpadding+space) gd.lineto(x0,everpadding) gd.strokestyle="red" gd.fillstyle="red" gd.stroke() gd.fill() } </script></head><body> <canvas id="c1" width="500" height="500"></canvas></body></html>
显示：
相关推荐：
html5 canvas入门学习教程_html5教程技巧
html5 canvas之测试浏览器是否支持canvas的方法_html5教程技巧
以上就是canvas 学习 3---画坐标系的详细内容。