 |
位置：电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：HTML5入门电子教程 > Canvas 坐标 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 使用 JavaScript 来绘制图像 | 下一篇： Canvas 路径 |
|
canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75)。 意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。 下面我们来看下在网页中的效果，示例代码如下： <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> 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> </head>
<body style="margin:20px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<div id="xycoordinates"></div>
</body> </html> 画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。效果如图7-3。
|
|
| 上一篇： 使用 JavaScript 来绘制图像 | 下一篇： Canvas 路径 |
