Question

我有以下裁剪应用程序：

        var canvas = $('#selector')[0]
        //works
        **canvas.width=image.width
        canvas.height=image.height**

        //doesn't work
        **//$(canvas).width($(image).width())
        //$(canvas).height($(image).height())**
        //both seem to do the exact same thing






        $('#selector').css('left','30px')

        var ctx = $('#selector')[0].getContext("2d");
        ctx.fillStyle="rgba(210,220,255,0.6)";

        var cropinit=false;




         //the cropped section will not be resizeable after the user finishes, but the user can create a new cropped section
        canvas.addEventListener("mousedown", function setP1(event) {
            //allows you to find the height and width by imagining a rectangle around it
            //get bounding selector parameters
            var selector_position = $('#selector').position()
            xOff=selector_position.left
            yOff=selector_position.top
            console.log(xOff)
            console.log(yOff)

            p1=[event.clientX-xOff, event.clientY-yOff];
            ctx.fillRect(80,54,40,40)
            console.log(p1)
            cropinit=true;
        });
        //so that if the user releases the mouse after it leaves the canvas, the crop completes
        canvas.addEventListener("mouseleave", function() {
            cropinit=false;
        });
        canvas.addEventListener("mousemove", function drawBox(event) {
            if (cropinit) {
                p2=[event.clientX-xOff, event.clientY-yOff]
                setBox();
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.fillRect(corner[0],corner[1],boxW,boxH);

                //console.log(p2)
                //console.log(corner[0]+" "+corner[1]+" "+boxW+" "+boxH);
            }
        });
        canvas.addEventListener("mouseup", function finishBox(event) {
            p2=[event.clientX-xOff, event.clientY-yOff];
            setBox();
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.fillRect(corner[0],corner[1],boxW,boxH);

            cropinit=false;

        });

当我使用普通的JavaScript代码在**中设置画布宽度和高度时，代码可以正常工作。但是，当我使用jQuery在**中设置宽度和高度时带注释。不在用户鼠标的起点和终点绘制矩形。 jQuery和普通的JS版本似乎产生相同的画布宽度和高度，但矩形是在不同的地方绘制的。他们似乎完全一样。有什么区别？

Answer 1

JavaScript element.width和jQuery width() 不等效。

element.width更改HTML属性。
element.style.width更改CSS样式值。
jQuery width()更改了CSS样式值，与前一个值相同。

在谈论canvas时，其width和height属性定义了实际的绘图大小。同时，width和height CSS属性控制图像的比例。

进一步请注意，height和width是用于绘图的逻辑画布尺寸，与style.height和style.width CSS属性不同。如果未设置CSS属性，则画布的固有大小将用作其显示大小;如果你设置CSS属性，并且它们与画布尺寸不同，你的内容将在浏览器中缩放。

有一个很好的Stackoverflow article，通过示例解释了width的{{1}}和height的含义。

jQuery width（）结果

因此，正如我所说，jQuery canvas函数会更改对象的内联样式。

width()

$("canvas").width(500).height(400);

document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;

element.width result

但是，此jQuery 数组中的每个项目都是DOM元素：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>

当您更改var canvas = $("#selector")[0]; // HTML element object canvas.width = 500; // changing the HTML element object's properties的{{1}}和height属性时，它实际上会更改其属性：

width

canvas

结论

因此，在canvas的情况下，您需要更改HTML属性，而不是样式规则，jQuery document.getElementsByTagName("canvas")[0].width = 500; document.getElementsByTagName("canvas")[0].height = 400; document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;和<canvas></canvas> 函数不适用于此。
同时，您可以通过以下方式使用jQuery：

width()

但是，它与纯JS代码完全相同。

jQuery和JS等效函数产生不同的结果

1 个答案:

jQuery width（）结果

element.width result

结论