使用鼠标事件绘制时矩形不显示在画布中答案

【问题标题】：Rectangle not displaying in canvas when drawing with mouse events使用鼠标事件绘制时矩形不显示在画布中
【发布时间】：2015-05-18 21:59:09
【问题描述】：

我正在尝试用鼠标事件绘制一个矩形，它似乎可以工作，我在所有代码中都使用了 console.log 来查看发生了什么，并且运行良好，但我认为矩形只是不喜欢我，它没有出现！

我不知道如何找到错误！

我只想要一个方向，谢谢你的时间。

Fiddle here.

这里的代码：

$("body").wrapInner("<canvas id='myCanvas'>");
var canvas = $("#myCanvas").css("cursor", "crosshair");
var context = canvas[0].getContext("2d");
var div = {x:0, y:0};
var draw_rectangle = function(e){
    context.fillRect (
        div.x, div.y,
        (e.pageX - div.x),
        (e.pageY - div.y)
    );
};
context.fillStyle = "#aaf";
canvas.on("mousedown", function(e){
    div.x = e.pageX;
    div.y = e.pageY;
    canvas.on("mousemove", draw_rectangle);
});
canvas.on("mouseup", function(){
    canvas.off("mousemove");
    console.log("Drawed.");
});

【问题讨论】：

标签： javascript canvas

【解决方案1】：

问题是，css properties``height 和 width 与 canvas 元素有问题，因为它们会拉伸您的画布元素以适应给定的大小 - 拉伸 canvas' 位图。另一方面，html properties height 和 width 决定了您的 canvas' 位图的大小。

因此，您的解决方案是将您的代码更改为以下内容：

$("body").wrapInner("<canvas id='myCanvas'>");
$('#myCanvas').attr("width", 400);
$('#myCanvas').attr("height", 500);
var canvas = $("#myCanvas").css("cursor", "crosshair");
var context = canvas[0].getContext("2d");
var div = {x:0, y:0};
var draw_rectangle = function(e){
    context.fillRect (
        div.x, div.y,
        (e.pageX - div.x),
        (e.pageY - div.y)
    );
};
context.fillStyle = "#aaf";
canvas.on("mousedown", function(e){
    div.x = e.pageX;
    div.y = e.pageY;
    canvas.on("mousemove", draw_rectangle);
});
canvas.on("mouseup", function(){
    canvas.off("mousemove");
    console.log("Drawed.");
});

canvas {
    background-color: rgba(0, 0, 0, 0.3);
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

信息来源：Canvas is stretched when using CSS but normal with "width" / "height" properties

【讨论】：