<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>HTML5</title>
<!-- WinJS 引用 -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- HTML5 引用 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>此处显示内容</p>
<canvas id="canvas1" width="320" height="200">
您的浏览器不支持canvas 元素
</canvas>
<canvas id="canvas2" width="320" height="200">
您的浏览器不支持canvas 元素</canvas>
<div id="div1" onmousemove="getCo(event)" onmouseout="clearCo()" style="width:300px;height:200px;border:1px solid green" >
<div id="xycoordiv"></div>
</div></body>
<script>
//先找到canvas这个画布
var c = document.getElementById("canvas1");
//获得对象，这个对象是用来画图的
var ctx = c.getContext("2d");
ctx.fillStyle = "#ff0000";
//开始绘图了，通过fillRect(),四个参数，开始的坐标，大小
ctx.fillRect(150, 150, 300, 200);//这是输出的一个方形
var c1 = document.getElementById("canvas2");
var ctx1 = c1.getContext("2d");
//在绘图之前通知canvas 我要开始绘图了
ctx1.beginPath();
//Math.PI获得圆周率,会出一个半圆，*2 获得一个圆
ctx1.arc(100, 100, 15, 0, Math.PI * 2, true);
//闭合 圆
ctx1.closePath();
ctx1.fillStyle = "green";
ctx1.fill();
function getCo(e) {
var x = e.clientX;
var y = e.clientY;
document.getElementById("xycoordiv").innerHTML = "当前坐标是：" + x + ‘,‘ + y ;
}
function clearCo() {
document.getElementById("xycoordiv").innerHTML = "";
}//获取鼠标的坐标
</script>
</html>
HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET,布布扣,bubuko.com
HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET