Html5 canvas HTML5在一个图像移动时混合两个图像_Html5 Canvas_Blending

Html5 canvas HTML5在一个图像移动时混合两个图像

html5-canvas

Html5 canvas HTML5在一个图像移动时混合两个图像,html5-canvas,blending,Html5 Canvas,Blending,我有一个包含两张图片的代码，一张是背景图片，另一张是在画布上随机移动的小图片。小图片在移动时必须混合（没有全局alpha）。你知道吗？以下是我到目前为止所做的 <script type="text/javascript"> var context; var dx= 4; var dy=4; var y=150; var x=10; function draw(){ var imageObj = document.ge

我有一个包含两张图片的代码，一张是背景图片，另一张是在画布上随机移动的小图片。小图片在移动时必须混合（没有全局alpha）。你知道吗？以下是我到目前为止所做的

 <script type="text/javascript">
    var context;
    var dx= 4;
    var dy=4;
    var y=150;
    var x=10;

    function draw(){
        var imageObj = document.getElementById("night");
        var imageObj2 = document.getElementById("small_image");
        context= myCanvas.getContext('2d');
        context.clearRect(0,0,1920,1200);
        context.drawImage(imageObj, 0, 0);
        context.drawImage(imageObj2, x, y);
        if( x<0 || x>1920-imageObj2.width)
        dx=-dx;
        if( y<0 || y>1200-imageObj2.height)
            dy=-dy;
            x+=dx;
            y+=dy;
        }
    setInterval(draw,10); 
    </script>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>It's Christmas Time</title>
    <style type="text/css">

    </style>
    </head>
    <body>
        <img id="night" src="cartoon.jpg" alt="sima" width="300" height="200" hidden>
        <img id="small_image" src="small_image.gif" hidden>

        <canvas id="myCanvas" width="1920" height="1200"></canvas>


    </body>
    </html>


var语境；
var-dx=4；
var-dy=4；
变量y=150；
var x=10；
函数绘图（）{
var imageObj=document.getElementById（“夜间”）；
var imageObj2=document.getElementById（“小图像”）；
context=myCanvas.getContext（'2d'）；
clearRect（0,019201200）；
drawImage（imageObj，0,0）；
drawImage（imageObj2，x，y）；
if（x1920-imageObj2.宽度）
dx=-dx；
if（y1200-imageObj2.高度）
dy=-dy；
x+=dx；
y+=dy；
}
设置间隔（抽签，10）；
现在是圣诞节

我对您期望发生的事情有点困惑。也许这就是你想要做的

var x = 0,
    y = 0,
    dx = 1,
    dy = 1;

function draw(){
      var imageObj = document.getElementById("night");
      var imageObj2 = document.getElementById("small_image");
      context= myCanvas.getContext('2d');
      context.clearRect(0,0,1920,1200);
      context.drawImage(imageObj, 0, 0);
      context.drawImage(imageObj2, x, y);
      if( x<0 || x > 1920 - imageObj2.width)
          dx = -dx;
      if( y < 0 || y > 1200 -imageObj2.height)
          dy = -dy;
      x += dx;
      y += dy;
}
setInterval(draw,10);

var x=0，
y=0，
dx=1，
dy=1；
函数绘图（）{
var imageObj=document.getElementById（“夜间”）；
var imageObj2=document.getElementById（“小图像”）；
context=myCanvas.getContext（'2d'）；
clearRect（0,019201200）；
drawImage（imageObj，0,0）；
drawImage（imageObj2，x，y）；
if（x 1920-图像对象J2.宽度）
dx=-dx；
如果（y<0 | | y>1200-图像对象J2.高度）
dy=-dy；
x+=dx；
y+=dy；
}
设置间隔（抽签，10）；

感谢您的重播：）我正在尝试将雪花混合。我的意思是我想根据它的位置更改其颜色。请澄清“混合”在您的设计中的含义。混合是Photoshop的混合模式之一：倍增、屏幕等？我不知道它叫什么，但我可以试着解释一下我的意思。我有一个背景图像和一个较小的图像雪花。雪花在移动，我想改变颜色。我想有50%是它的颜色，50%是背面的颜色。也许这是对山姆·格林哈勒想法的扭曲：。这将使用合成来混合来自2个图像的颜色。特别是“打火机”合成将两种颜色加在一起。作为奖励，尼古拉斯·凯奇·斯诺（Nicolas Cage snow）在这里