【问题标题】:Draw images on in the middle of a canvas在画布中间绘制图像
【发布时间】:2013-04-25 10:34:20
【问题描述】:

我正在制作一个相册,但我所有的图像都是在原点 (0,0) 上绘制的。

canvasContent.drawImage(arrPhoto[currentIndex], 0, 0);

如何确保我的图像绘制在画布对象的中间?

感谢您帮助我!

更新

我的问题可能有点错误。 我的意思是:我希望图像的中间位于画布的中间,而不是图像的上角。

对不起

编辑:错字

Edit2:错字

【问题讨论】:

    标签: javascript html image canvas


    【解决方案1】:

    将原点(始终为 0,0 -- 左上角)偏移 + (image.width / 2)+ (image.height / 2) 以在画布中心开始绘制。

    drawImage(image, image.width/2, image.height/2)
    

    【讨论】:

    • 这也有效,但我的问题表述错误。但是我的问题已经解决了。谢谢!
    【解决方案2】:

    如果你想把它画在中心,你需要知道图像的宽度和高度。之后就变得容易了:

    //var canvas = document.getElementById("yourCanvasElementID");
    var img = arrPhoto[currentIndex];
    canvasContent.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);
    

    【讨论】:

    • 这也有效,但我的问题表述错误。但是我的问题已经解决了。谢谢
    【解决方案3】:

    如果您像这样提供x, y 位置:

    var image = arrPhoto[currentIndex];
    canvasContent.drawImage(image,
            canvas.width / 2 - image.width / 2,
            canvas.height / 2 - image.height / 2
    );
    

    那么它应该出现在中心。一个实际的例子可以在:http://jsfiddle.net/VPLZc/2/ 获得。

    【讨论】:

    【解决方案4】:

    如果您希望它位于中心并且正在重新缩放图像,它会从顶角向下缩放,但中心点保持不变。如果您使用 JavaScript 调整图像大小,则不应这样做,而只需将图像编辑为更小/更大。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-09
      • 1970-01-01
      • 2012-11-09
      • 1970-01-01
      相关资源
      最近更新 更多