Question

我有两个问题：如何用鼠标或html画布绘制矩形，以及为什么我的计时器不显示。我在这里尝试了所有代码，但似乎没有任何工作。谢谢！

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Resize</title>
    <style>
        canvas {
            border: 1px solid black;
        }

        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <p id="timer"></p>
    <script src="canvas.js"></script>
</body>
</html>

JAVASCRIPT

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');


//TIMER
var timer = document.getElementById('timer');

var counter = 0;

function setup(){
    timer = createP('timer');
    setInterval(timeIt, 1);
}

function timeIt (){
    timer.html(counter);
    counter+=134;
}

这是小提琴 https://jsfiddle.net/rita24/0vLwj3go/2/

谢谢！

Answer 1

对于画布部分，您可以添加事件侦听器以跟踪mouseup，mousemove和mousedown事件。

canvas.addEventListener("mousedown", function (e) {
  drawing = true;
  lastPos = getMousePos(canvas, e);
}, false);
canvas.addEventListener("mouseup", function (e) {
  drawing = false;
}, false);
canvas.addEventListener("mousemove", function (e) {
  mousePos = getMousePos(canvas, e);
}, false);

// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: mouseEvent.clientX - rect.left,
    y: mouseEvent.clientY - rect.top
  };
}

这将有助于您在画布上创建矩形。

ctx.rect(mousePos.x,mousePos.y,lastPos.x-mousePos.x,lastPos.y-mousePos.y);
ctx.stroke();

您可以查看如何在画布上使用鼠标绘图：http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

对于计时器部分，您尚未调用setup（）函数，并且您正在使用jQuery html（）函数来设置p元素内的文本。使用.innerHTML更改p元素内的文本。

以下是您的JSfiddle的更新链接：https://jsfiddle.net/0vLwj3go/7/

希望这有帮助！

Answer 2

埃尔维斯＆＃39;回答很好，但是因为我今天早上已经开始了，所以无论如何我都会发布它。

首先，你不是在任何地方调用setup（），所以定时器永远不会被设置，而定时器<p>永远不会得到任何内容。这是我的conditional deployment，它与Elvis＆＃39;非常相似，但显示的是没有滚动的计时器，并且包含了如何为矩形绘制设置动画的示例。

如何在html画布上用鼠标绘图？

2 个答案: