Javascript 如何使用我的代码让鼠标悬停在带有事件侦听器的html画布上绘制？https://jsfiddle.net/dannixx/d0p0j8cL/

如何使用我的代码让鼠标悬停在带有事件侦听器的html画布上绘制？ jifiddle文件，我希望能够用鼠标在画布上画线

帆布
#游说{
边框：点着的3件黑色；
背景颜色：蓝色；
}
window.onload=函数（）{
var theCanvas=document.getElementById（“Canvas1”）；
if（canvas&&document.getContext（“2d”））{
var ctx=canvas.getContext（“2d”）
如果（ctx）{
ctx.fillStyle=“浅蓝色”；
ctx.fillRect（0,0 ctx.canvas.width，ctx.canvas.height）
}
} 
}
纳瓦斯
前

下面是一个简单的示例脚本（使用笔划方法）用于在画布上绘制：

HTML:

<canvas id="can1"></canvas>

JavaScript:

var can = document.getElementById("can1");
var canCtx = can.getContext("2d");
var sx = 0, sy = 0;
var clicked = false;
function _left(e){
    return e.pageX - can.offsetLeft;
}
function _top(e){
    return e.pageY - can.offsetTop;
}
function _draw(e, sx, sy){
    var x = _left(e);
    var y = _top(e);
    canCtx.moveTo(sx, sy);
    canCtx.lineTo(x, y);
    canCtx.strokeStyle="red";
    canCtx.stroke();
}
can.addEventListener("mousedown", function(e){
    sx = _left(e);
    sy = _top(e);
    _draw(e, sx, sy);
    clicked = true;
}, false);
can.addEventListener("mousemove", function(e){
    if(clicked == true){
        _draw(e, can);
    }
}, false);
addEventListener("mouseup", function(){
    clicked = false;
}, false);

---

下面是一个非常简单的示例，使用onmousemove侦听器更新新的鼠标坐标，并从以前的坐标到新坐标绘制一条线。跑过去看看

var x=null；
var y=null；
var c=null；
var-ctx=null；
函数getPos（e）{
//如果是第一次调用事件侦听器，则将x和y设置为新的鼠标坐标
如果（x==null）{
x=e.clientX；
y=e.clientY；
}
//否则，从上一点（x，y）绘制到新坐标（e.clientX，e.clientY）。
ctx.beginPath（）；
ctx.moveTo（x，y）；
ctx.lineTo（e.clientX，e.clientY）；
ctx.stroke（）；
x=e.clientX；
y=e.clientY；
}
window.onload=函数（）{
c=document.getElementById（“Canvas1”）；
ctx=c.getContext（“2d”）；
}

---

您的代码不包含任何绘制线函数，因此很难说您做错了什么。代码所做的就是绘制画布。你能具体解释一下你不明白的地方吗？要实现此解决方案，您需要做的就是将事件侦听器添加到画布元素，并添加我编写的内容。这是我的代码，当鼠标移动到框上时，您能否使其显示一条黑线，谢谢工作谢谢，我明天的学校作业有东西要交。当作业结束时，我无法让它划清界限。你能告诉我我做错了什么吗？这是我的密码

#can1 {
    border:dashed 3px #000;
}

var can = document.getElementById("can1");
var canCtx = can.getContext("2d");
var sx = 0, sy = 0;
var clicked = false;
function _left(e){
    return e.pageX - can.offsetLeft;
}
function _top(e){
    return e.pageY - can.offsetTop;
}
function _draw(e, sx, sy){
    var x = _left(e);
    var y = _top(e);
    canCtx.moveTo(sx, sy);
    canCtx.lineTo(x, y);
    canCtx.strokeStyle="red";
    canCtx.stroke();
}
can.addEventListener("mousedown", function(e){
    sx = _left(e);
    sy = _top(e);
    _draw(e, sx, sy);
    clicked = true;
}, false);
can.addEventListener("mousemove", function(e){
    if(clicked == true){
        _draw(e, can);
    }
}, false);
addEventListener("mouseup", function(){
    clicked = false;
}, false);