HTML5 - Canvas 元素和自定义光标

Question

HTML5 文档 - Canvas 元素不是运行自定义 'rectangle' 游标的 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>

Answer 1

您根本没有使用 event 对象 -- clientX 和 clientY 不是全局属性。

function CustomCursor(<b>event</b>){
canvas.clearRect(0,0,600,400);
var xPosition = <b>event</b>.clientX;
var yPosition = <b>event</b>.clientY;
canvas.fillRect(xPosition, yPosition, 100, 100);}

Answer 2

这里有几个问题，Scimonster 的回答中已经指出了一些问题，但一个重要的问题仍然存在。

为了正确放置矩形，您需要 "correct" 鼠标位置。鼠标位置是相对于客户端 window 而你需要它们相对于 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>

Answer 3

谢谢大家！我们现在有一个用于在 canvas 上绘画的自定义光标 :)

<!DOCTYPE html>
<html>

    <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>
var canvas; var context;

function CanvasProperties(){
canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d");
window.addEventListener("mousemove", CustomCursor, false);}

function CustomCursor(event){
var xPosition = event.clientX;
var yPosition = event.clientY;
context.fillRect(xPosition, yPosition, 100, 100);}

window.addEventListener("load", CanvasProperties, false);
</script>

</body>
</html>

HTML5 - Canvas 元素和自定义光标

HTML5 - Canvas Element & Custom Cursor

html

javascript

canvas