理解Canvas坐标系 · canvas基本功能

如下图所示，`canvas`元素的坐标系统是一个二维网格，它的坐标系是以左上角为原点，向右延伸是横坐标 `x` 的正方向，向下延伸是纵坐标 `y` 的正方向，所以原点的坐标是 `(x,y) = (0,0) `。 ![](https://img.kancloud.cn/9a/5c/9a5cdba6475802c57f1d5cfdb76a91f5_329x266.png) 弄清楚以后使用 `canvas` 的 `API` 意义重大，在绘图的时候需要时刻记住坐标空间。在以后会讲到的 `fillRect` 方法拥有参数 `(0,0,150,75)` ，意思是：在画布上绘制 `150*75` 的矩形，从左上角 `(0,0)` 开始。 >案例：使用`JavaScript`来获取`Canvas`坐标，当鼠标移到矩形框上时，显示定位坐标。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <div id="coordiv" style="float: left;width: 199px;height: 99px;border: 1px solid #c3c3c3;" onmouseover="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <div id="xycoordinates"></div> <script> //定位坐标并输入 function cnvs_getCoordinates(e) { x = e.clientX; y = e.clientY; document.getElementById("xycoordinates").innerHTML = "Coordinates:(" + x + "," + y + ")"; } //清除内容 function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML = ""; } </script> </body> </html> ``` 程序运行效果如下图所示： ![](https://img.kancloud.cn/79/5d/795de636f3ce0912ff535ced7c1087d5_503x145.png)