اذهب إلى المحتوى

السؤال

نشر (معدل)
 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

Recommended Posts

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

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...