相关疑难解决方法(0)

在IE中,我可以使用:

<img src="http://example.com/image.png" style="filter:FlipH">

实现水平翻转图像.

有没有办法在HTML5中水平翻转？(也许是通过使用画布？)

谢谢所有:)

我正在使用画布来显示一些精灵,我需要水平翻转一个(所以它面向左或右).但是,我无法看到任何方法drawImage.

这是我的相关代码:

this.idleSprite = new Image();
this.idleSprite.src = "/game/images/idleSprite.png";
this.idleSprite.frameWidth = 28;
this.idleSprite.frameHeight = 40;
this.idleSprite.frames = 12;
this.idleSprite.frameCount = 0;

this.draw = function() {
        if(this.state == "idle") {
            c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
            if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
        } else if(this.state == "running") {
            c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, 0, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
            if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; …

我怎样才能只画两张带有反转的图像我不知道如何反转。请帮忙。

    var canvas = document.createElement('canvas');
    canvas.width = 16 * scale;
    canvas.height = 32 * scale;
    //we assign the same classname the image has, for CSS purposes
    canvas.setAttribute('class', skinImage.getAttribute('class'));
    canvas.setAttribute('title', skinImage.getAttribute('title'));
    var context = canvas.getContext("2d"),
    s = scale;
    context.imageSmoothingEnabled=!1,
    context.mozImageSmoothingEnabled=!1,
    context.oImageSmoothingEnabled=!1,
    CanvasRenderingContext2D.webkitImageSmoothingEnabled=!1,
    context.clearRect(0,0,canvas.width,canvas.height);

    //back draw the head
    context.drawImage(skinImage, 24,  8,  8, 8,  4*s,  0*s,  8*s, 8*s);
    //back draw the body
    context.drawImage(skinImage, 32, 20, 8, 12, 4*s,  8*s,  8*s, 12*s);
    //back draw the right leg
    context.drawImage(skinImage, 52, 20, 4, 12, …

我遇到以下问题：我的画布元素 (1280x720) 需要水平镜像并旋转到 180 度。之后，画布就变成了一个 base64 图像（工作没有问题）。

我试过：

var ctx =meinElement.getContext('2d');
meinElement.width = 1280;
meinElement.height = 720;
ctx.scale(-1, 1);
ctx.translate(meinElement.width-1,   meinElement.height-1);
ctx.rotate(Math.PI);
ctx.drawImage(video, 0, 0, meinElement.width, meinElement.height);

旋转就像一个魅力，但镜像会导致黑色元素 - 无论我先旋转还是镜像 - 有人有想法吗？

多谢！