代码之家 › 专栏 › 技术社区 › LePioo

画布变换旋转瑕疵

image-rotation transform canvas html javascript

LePioo · 技术社区 · 7 年前

我得到了一个简单的图像旋转的小代码

var img = new Image(50, 200);
img.addEventListener("load", (e) => {
  setInterval(function() {
    main.getContext("2d").clearRect(0, 0, 600, 400);
    main.getContext("2d").rotate(-1 * Math.PI / 180);
    main.getContext("2d").drawImage(img, 0, 0, 50, 200, 0, 0, 50, 200);
  }, 50);
});
img.src = "https://i.stack.imgur.com/gCWW9.png";

<body>
  <canvas id="main" width=600 height=400></canvas>
</body>

链接的矩形图像资源:

结果:

为什么它会生成所有这些工件?

2 回复 | 直到 7 年前

LePioo 7 年前

实际上我发现了这个问题,似乎变换矩阵也对clearRect()方法有影响,所以“清除区域”也会旋转。。。

只需添加setTransform(1,0,0,1,0,0),在调用clearRect()之前重置转换矩阵,如下所示:

var rotation=0;
var img = new Image(50, 200);
    img.addEventListener("load", (e) => {
        setInterval(function() {
        rotation--;
        main.getContext("2d").setTransform(1,0,0,1,0,0);         //that line was missing
        main.getContext("2d").clearRect(0, 0, 600, 400);
        main.getContext("2d").rotate(rotation * Math.PI / 180);
        main.getContext("2d").drawImage(img, 0, 0, 50, 200, 0, 0, 50, 200);
        }, 50);
});
img.src = "https://i.stack.imgur.com/gCWW9.png";

<body>
<canvas id="main" width=600 height=400></canvas>
</body>

yue you 7 年前

根据@GolfWolf的评论,我使用了以下代码,它可以正常工作。

var img = new Image(50, 200);
img.addEventListener("load", (e) => {
  setInterval(function() {
    main.getContext("2d").clearRect(-0.5, -0.5, 600, 400);
    main.getContext("2d").rotate(-1 * Math.PI / 180);
    main.getContext("2d").drawImage(img, 0, 0, 50, 200, 0, 0, 50, 200);
  }, 50);
});
img.src = "https://i.stack.imgur.com/gCWW9.png";

<body>
  <canvas id="main" width=600 height=400></canvas>
</body>

推荐文章

Jay White · useRef。current存在,但根据作用域的不同为空

2 年前

Laurie Thom · 使用HTML画布和JS的拖尾图像

2 年前

Hamza Zafeer Bert · 2画布不能以单一HTML格式工作

2 年前

Chukwuma Kingsley · clearRect让我的方块消失了

2 年前

Shaheryar Ahmed · 如何在放大或缩小时更改tkinter画布文本项的大小?

2 年前

bemol · D3正确缩放/重缩放

2 年前

Ghoyos · 这个“如果声明”不应该引起反弹吗?

6 年前

Ghoyos · 一旦实例化/绘制到画布,移除/删除函数对象的最佳方式是什么?

6 年前

user8923822 · 如何从画布中清除Path2D

6 年前

Martyna · 画布上的李萨如曲线

6 年前