好吧,现在我正在尝试学习如何在 html 上使用 canvas 标签,并且当我将 css 应用于文档时,我无法处理鼠标事件。
当我移动包含画布的 div 并将其在页面上居中时,问题就开始了,画布的第一个位置不会是 0,因为它居中并且由于某种原因 0,0 将是屏幕的开头而不是开头画布,我觉得很奇怪,因为我直接将事件侦听器添加到画布。
这是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#divId {
width: 800px;
height: 600px;
text-align:center;
margin: 20px auto;
background-color:#0099FF;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById('canvasId');
var c = canvas.getContext('2d');
alert("lol");
canvas.addEventListener('mousedown', hmd, false);
function hmd(e) {
alert ("x: " + e.clientX + " y: " + e.clientY);
}
}
</script>
</head>
<body>
<div id="divId">
<canvas height="300" width="800" id="canvasId" />
</div>
</body>
</html>
所以我在某处读到问题是由 div 引起的,但是当我尝试将 css 直接提供给画布标签时它不起作用,所以基本上我需要做的是让画布居中或放置在屏幕上的任何位置,但其第一个像素为 0,0。添加解决方案会很困难,因为它会自动居中,所以我需要知道用户分辨率才能计算偏移量,所以我正在寻找一种简单地使用 css 或其他东西来完成它的方法。