HTML5 смешайте два изображения, пока они движутся

У меня есть код с двумя картинками, фоновой картиной и меньшим, который перемещается случайным образом вокруг холста. Маленькая картинка должна быть смешана (без глобальной альфы) во время движения. У вас есть идея? Вот что я сделал до сих пор.HTML5 смешайте два изображения, пока они движутся

<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>

источник

2014-11-25 Maria Arvanitakh

Я немного смущен тем, что вы ожидаете. Возможно, это именно то, что вы пытаетесь сделать?

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);

http://jsfiddle.net/avzn89ay/

источник

2014-11-25 20:07:02

Спасибо за ваш повторе :) Я пытаюсь сделать снежинку blended.I означает, что я хочу, чтобы изменить его цвет accoriding положение, которое она имеет. –

Просьба уточнить, что означает «смесь» в вашем дизайне. Является ли Blend одним из режимов смешивания Photoshop: умножить, экран и т. Д.? – markE

Я не знаю, как это называется, но я могу попытаться объяснить вам, что я имею в виду. У меня есть фоновое изображение и еще одно изображение снежинки. Снежинка движется, и я хочу изменить цвет. Я хочу иметь 50% цвет и 50% цвет, который находится на заднем плане. –

HTML5 смешайте два изображения, пока они движутся

ответ

Смежные вопросы