13
تشکر

وب زیباتر با Canvas

Canvas

Canvas

روزهای پنچشنبه و جمعه اگر روز کاری یا درسی نباشند، بهترین روز برای پرورش ایده‌ها و فکرهای تازه است. خب بهترین بخش برای کار کردن با HTML5 کدام است؟ مطمئناً Canvas یکی از جواب‌های شما است.

با ما در ادامه مطلب همراه باشید

اگر میخواهید نحوه ساخت آن چیزی که در این مطلب را میبینید بدانید بهتر است ابتدا مطالب آموزش کار با Canvas و ساخت تایمر دایره‌ای شکل با Canvas را یاد گرفته باشید.

برای مشاهده دمو از مرورگر Chrome 30, Firefox 20 و Safari 6.1 به بالا استفاده کنید.

مشاهده دمو

مشاهده در codepen.io

کد JavaScript این دمو مانند زیر است:


var canvas = document.getElementById(‘canvas’);
canvas.width =window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.background = “#222222″;
 
var ctx = canvas.getContext(‘2d’);
ctx.globalCompositeOperation = ‘screen';
 
var colors = [‘rgba(105,210,231,1)’, ‘rgba(167,219,216,1)’, ‘rgba(224,228,204,1)’, ‘rgba(243,134,48,1)’, ‘rgba(250,105,0,1)’, ‘rgba(255,78,80,1)’, ‘rgba(249,212,35,1)’];
 
var shapes = [];
 
window.addEventListener(‘mousemove’, function(e) {
  for(var i = 0; i < 4; i++) {     shapes.push(new SHAPE(e.x, e.y));   } }, 'false');   function SHAPE(x, y) {   this.x = x;   this.y = y;   this.lastX = 0;   this.lastY = 0;   this.radius = (Math.random() * 40) + 10;   this.color= random(colors); }   animateInterval = setInterval(animate, 10);   function animate() {   ctx.clearRect(0, 0, canvas.width, canvas.height);   for(var i = 0; i < shapes.length; ++i){     ctx.beginPath();     ctx.arc(shapes[i].x, shapes[i].y, shapes[i].radius, 0, Math.PI *2, false);     ctx.fillStyle = shapes[i].color;     ctx.fill();     shapes[i].radius *= 0.98;     var x = find_best(shapes[i].lastX);     var y = find_best(shapes[i].lastY);     shapes[i].x += x;     shapes[i].y += y;     shapes[i].lastX = x;     shapes[i].lastY = y;     if(shapes[i].radius < 0.1) { shapes.shift(); }   } }   function find_best(value) {   if(value == 0) {     return (Math.random() * 11) - 5;   }   else if(value > 0) {
    return (Math.random() * 2) – 0.02;
  }
  else if(value < 0) {     return -((Math.random() * 2)) + 0.02;   } }   function random(arr) {   var r = Math.floor(Math.random() * arr.length);   return arr[r]; } [/javascript]

توضیح روند کار

کل روند کار به این صورت است که زمانی که کاربر ماوس خود را در صفحه تکان میدهد ما یک دایره در همان x و y ماوس کاربر، میسازیم و اطلاعات دایره را مانند مکان دایره، شعاع و رنگ آن را در یک آرایه نگهداری میکنیم، و بوسیله setInterval، هر ده میلی ثانیه یک بار ابتدا کل canvas را پاک کرده، سپس دوباره همان دایره را ولی اینبار با سایز کوچکتر و مکان جدید رسم میکنیم.

البته مشابه این را با کتابخانه sketch.js ساخته اند، ولی ما از هیچ کتابخانه ای استفاده نکردیم.

منتظر ایده‌های نو و جدید شما در Canvas هستیم.

مشاهده دمو

مشاهده در codepen.io

  • Ezal می‌گه:

    biiiiiiiiiiiiiiisssssssssssssstttttttttt 😉

  • hfابي می‌گه:

    تی موس گوت؟؟

  • دمو فقط یه صفحه سیاه میاد کار نمیکنه که


  • نظرات این مطلب بسته است.