HTML5 文档 - Canvas 元素未运行自定义“矩形”光标的 JavaScript 参数。请帮忙:)
<head>
<title>Canvas Element & Custom Cursor</title>
</head>
<body id="body" style="background-color:red;">
<canvas id="canvas" width="600" height="400" style="background-
color:white;"> </canvas>
<script>
funtion CanvasProperties(){
var canvas = document.getElementById("canvas");
canvas = canvas.getContext("2d");
window.addEventListener("mousemove", CustomCursor, false);}
function CustomCursor(){
canvas.clearRect(0,0,600,400);
var xPosition = clientX;
var yPosition = clientY;
canvas.fillRect(xPosition, yPosition, 100, 100);}
window.addEventListener("load", CanvasProperties, false);
</script>
</body> </html>
最佳答案
这里有几个问题，其中一些已经在 Scimonster 的回答中指出，但仍然存在一个重要的问题。
为了正确放置矩形，您需要“更正”鼠标位置。鼠标位置是相对于客户端窗口的，而您需要它们相对于 Canvas 元素的。
此外，您正在使用上下文覆盖 Canvas 。为其使用单独的变量，并将它们放置在全局(父)范围内。
这是完整版本(在脚本标签内):
var canvas, context; // place this in global scope
function CanvasProperties(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // separate var for context...
window.addEventListener("mousemove", CustomCursor, false);
}
function CustomCursor(e){
var canvasRect = canvas.getBoundingClientRect(); // get position of canvas element
var xPosition = e.clientX - canvasRect.left; // adjust mouse positions to
var yPosition = e.clientY - canvasRect.top; // become relative to canvas
context.clearRect(0,0,600,400); // use context
context.fillRect(xPosition - 50, yPosition - 50, 100, 100);
}
window.addEventListener("load", CanvasProperties, false);<canvas id="canvas" width=600 height=400></canvas>关于javascript - HTML5 - Canvas 元素和自定义光标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29321951/