【问题标题】:Rotating individual graphics images in javasctipt在javascript中旋转单个图形图像
【发布时间】:2017-05-09 18:07:50
【问题描述】:

我正在尝试从 javascript 中的图像旋转图形,但到目前为止我运气不佳。我尝试创建一个单独的画布来执行此操作,但这导致图像失真,似乎在画布上出现和消失。这是我现在正在使用的功能:

function rotImage(img,deg){
    var rotateImage;
    var radDegrees = deg * (Math.PI/180);
    var imageRotCanvas = document.createElement('canvas');
    var imageRotCanvasCtx = imageRotCanvas.getContext('2d');
    var rotWidth = Math.ceil(Math.abs((img.width * Math.cos(radDegrees)) + (img.height * Math.sin(radDegrees))));
    var rotHeight = Math.ceil(Math.abs((-img.width * Math.sin(radDegrees)) + (img.height * Math.cos(radDegrees))));
    imageRotCanvas.width = rotWidth*8;
    imageRotCanvas.height = rotHeight*8;
    imageRotCanvasCtx.rotate(radDegrees);
    imageRotCanvasCtx.drawImage(img,0,0);
    rotateImage = imageRotCanvas.toDataURL('image/png');
    return rotateImage;
}

有没有更好的方法来进行二维图形的基本操作?我学习 Javascript 是为了好玩,到目前为止,GFX 一直是最大的问题。如果有图书馆或其他东西,我很乐意使用它。这是针对一系列对象而不是单个图像。我将有多个必须旋转的图像。

【问题讨论】:

标签: javascript canvas graphics


【解决方案1】:

好的。看起来好像真的没有这样做的好方法,用外部资源保存。我会将其标记为已回答。

【讨论】:

    猜你喜欢
    • 2018-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多