理解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)