画布上下文坐标不一致

canvas context coordinates are inconsitent

本文关键字：不一致 坐标 上下文      更新时间：2023-09-26

我正试图在html5画布上绘制，下面的代码应该会给我一条从左上到右下的对角线。然而，我没有得到预期的结果。是否需要对上下文进行任何转换？HTML

<canvas id="myCanvas" style="margin-left:auto; margin-right:
     auto;width:700px;height:100px;border:1px solid grey">
</canvas>

JS-

var canvas = $("#myCanvas");
var pen = canvas[0].getContext("2d");    
pen.strokeStyle = "#000000"; pen.lineWidth = "2";    
pen.beginPath(); pen.moveTo(700, 100); pen.lineTo(0,0);
pen.stroke();

http://jsfiddle.net/neilghosh/DvjAP/2/

jsFiddle演示

奇怪但真实。Canvas元素W/H必须（不仅是*）设置为inline，如：

 <canvas id="myCanvas" width="700" height="100"></canvas>

将其余部分放在CSS样式表中：

    #myCanvas{
        margin-left:auto;
        margin-right: auto;  
        border:1px solid grey
    }

  • 为了更好地理解：
    默认情况下，Canvas元素的W/H值为：300x150，但如果您在样式表中更改该值，则会像拉伸任何其他图像一样拉伸画布渲染。

  • 另一种改变W/H的方法是使用JS，比如：

    canvas[0].width=700
    canvas[0].height=100；

演示

相关文章：