2张图合并, 一张图是底图不动, 另一张旋转, 如果在一个context下, 能实现吗?

铁皮饭盒
  • 4.9k

如果不能, 是不是要做2个context, 然后context合并, 性能影响大吗? 我的工作中的需求就是简单的图片合成处理. 求问

回复
阅读 2.2k
4 个回答

可以的,你也要对不变的那张图片相对于 context 变化进行变化,就可以保持不变

这样可以做到:

    var ctx = document.getElementById('canvas').getContext("2d");
    var img = document.getElementById('img');
    
    function draw1() {
      ctx.fillStyle = "yellow"
      ctx.rotate(20*Math.PI/180);
      ctx.drawImage(img,10,10);
    }
    
    function draw2() {
      ctx.fillStyle = "yellow"
      ctx.rotate(-20*Math.PI/180);
      ctx.drawImage(img,10,10);
    }
    
    function render() {
     draw1();
     draw2();
    }
    
    render();
宣传栏