如何使用canvas画坐标系？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
<!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>显示：
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
