开发者

Canvas elements appear skewed in Webkit with context blender

EDIT: Below is the original post, but I have figured out the problem. It appears the problem was with using a decimal number as the Y coordinate (destY). I sorted this out by rounding:

    var rand = {
      destX: Math.round(Math.random()*main.canvas.width),
      destY: Math.random()*main.canvas.height
    }

I have included images to show the difference between Firefox and Chrome. As you can see the images I have blended onto the canvas are skewed. Has anyone experienced this before? Is it a problem with context blender, or Webkits canvas in general?

var main;

$(document).ready(function(){
  var canvas = document.getElementById('canvas');
  main = canvas.getContext('2d');
  main.canvas.width  = $(window).width();
  main.canvas.height = $(window).height()/2;
});

$(window).load(function(){
  var array = new Array();
  $('img').each(function(){
    var temp = document.create开发者_开发百科Element('canvas');
    var ctx = temp.getContext('2d');
    ctx.canvas.width = this.width;
    ctx.canvas.height = this.height;
    ctx.drawImage(this,0,0);
    var rand = {
      destX: Math.random()*main.canvas.width,
      destY: Math.random()*main.canvas.height
    }
    ctx.blendOnto(main,'multiply',rand);
  });
});

Canvas elements appear skewed in Webkit with context blender

Canvas elements appear skewed in Webkit with context blender

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜