• 0

كيف اغير لون الخلفيه

 var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var chinese = "abcdefghijklmnoqrstuvwxyz!@#$";
//converting the string into an array of single characters
chinese = chinese.split("");

var font_size = 20;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
    drops[x] = 1; 

//drawing the characters

function draw()
{  
    //Black BG for the canvas
    //translucent BG to show trail

    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
    
    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
}

    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        
        //a random chinese character to print
        var text = chinese[Math.floor(Math.random()*chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);
        
        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;
        
        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);

الخلفيه الي ورا سودا ابي اضيف صوره بداله وابي الحروف الي تتساقط ماترجع تتكرر 

تمّ تعديل بواسطة Red Snip

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

مرحبا 
يمكنك تغيير الخلفية الى صورة بإستخدام هذه الأكواد
 

var background = new Image();
// هنا ستقوم بوضع مسار الصورة التي تريدها
background.src = "https://img.freepik.com/free-photo/3d-grunge-room-interior-with-spotlight-smoky-atmosphere-background_1048-11333.jpg";
background.onload = function(){
   ctx.drawImage(background,0,0, window.innerWidth,window.innerHeight);   
}
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

في اي سطر احطها لاني جربت ماضبط او استبدل لها بسطر ياليت توضح لو سمحت 

 

تمّ تعديل بواسطة Red Snip

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

مرحبا 
يمكنك تغيير الخلفية الى صورة بإستخدام هذه الأكواد
أولا تقوم بكتابة كود html الذي سيحتوي على canvas بهذا الشكل

<canvas id="c"></canvas>

و بعدها تستخدم جافاسكربت بهذا الشكل

var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

var background = new Image();
background.src = "https://img.freepik.com/free-photo/3d-grunge-room-interior-with-spotlight-smoky-atmosphere-background_1048-11333.jpg";
background.onload = function(){
   ctx.drawImage(background,0,0, window.innerWidth,window.innerHeight);   
}

يمكنك مشاهدة النتيجة من خلال هذا الرابط

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن