javascript - 画布中的图像 ID

Question

动态加载图像：

imageObj.src = "source";

按钮点击代码：

$(document).ready(function ()
        {
            var value = 0;
            $('#left').click(function ()
            {
                alert("left click");
                value -= 90;
                $('#img').rotate({ animateTo: value });

            });
            $('#right').click(function ()
            {
                value += 90;
                $('#img').rotate({ animateTo: value });
            });
        });     

我已经在画布按钮单击中动态加载了图像，但是我必须在画布中顺时针和逆时针旋转图像。

当我在 html 中采用硬编码的 img 标签时它可以工作，但是当图像动态加载时我的功能不起作用。

Answer 1

就像 Bergi 提到的那样，您实际上是在旋转，没有任何东西被画在画布上。这是我为您准备的一个工作示例：

http://jsfiddle.net/gurkavcu/J9B3k/

您可以像这样旋转图像对象：

 $('#left').click(function() {

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.translate((imageObj.width / 2), (imageObj.height /2));
        context.rotate(-90 * Math.PI / 180);
        context.translate(-(imageObj.width / 2), -(imageObj.height / 2));
        context.drawImage(imageObj, 0, 0, imageObj.width , imageObj.height);


    });
    $('#right').click(function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.translate((imageObj.width / 2 ), (imageObj.height / 2));
        context.rotate(90 * Math.PI / 180);
        context.translate(-(imageObj.width / 2), -(imageObj.height / 2));
        context.drawImage(imageObj, 0, 0, imageObj.width , imageObj.height);
    });