位置:电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) 推荐学习资源
HTML5 简介
HTML5 Canvas教程
HTML5 基础标签
HTML5 表单属性和input详解
HTML5 高级部分
当前阅读教程:HTML5入门电子教程 > Canvas 坐标
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 使用 JavaScript 来绘制图像 下一篇: Canvas 路径

canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75) 意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!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

image.png



上一篇: 使用 JavaScript 来绘制图像 下一篇: Canvas 路径
毕业设计网             广告联系QQ:45157718(微信同号)