Mare Nostrum: 2011

понедельник, 5 декабря 2011 г.

globalCompositeOperation

Установка этого параметра в один из двенадцати вариантов, позволяет не только определять последовательность выдачи на экран отрисованых элементов, но и также маскировать их полностью или частично, причем это могут быть любые объекты и кисти

  globalCompositeOperation = тип;

тип - строка, из двенадцати возможных .

Этот код выводит все варианты композиций в виде выше показаного рисунка

var compositeTypes = [
  'source-over','source-in','source-out',
  'source-atop', 'destination-over',
  'destination-in','destination-out',
  'destination-atop','lighter',
  'darker','copy','xor'];

function draw(){
  for (i=0;i<compositeTypes.length;i++){
    var label = document
        .createTextNode(compositeTypes[i]);
    document.getElementById('lab'+i)
       .appendChild(label);
    var ctx = document
       .getElementById('tut'+i).getContext('2d');

    // draw rectangle
    ctx.fillStyle = "#09f";
    ctx.fillRect(15,15,70,70);

    // set composite property
    ctx.globalCompositeOperation 
       = compositeTypes[i];
    
    // draw circle
    ctx.fillStyle = "#f30";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
  }
}

воскресенье, 4 декабря 2011 г.

Пример - scale

function draw() {
  var ctx = document
               .getElementById('canvas')
               .getContext('2d');
  ctx.strokeStyle = "#fc0";
  ctx.lineWidth = 1.5;
  ctx.fillRect(0,0,300,300);

  // Uniform scaling
  ctx.save()
  ctx.translate(50,50);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(100,0);
  ctx.scale(0.75,0.75);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(133.333,0);
  ctx.scale(0.75,0.75);
  drawSpirograph(ctx,22,6,5);
  ctx.restore();

  // Non uniform scaling (y direction)
  ctx.strokeStyle = "#0cf";
  ctx.save()
  ctx.translate(50,150);
  ctx.scale(1,0.75);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(100,0);
  ctx.scale(1,0.75);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(100,0);
  ctx.scale(1,0.75);
  drawSpirograph(ctx,22,6,5);
  ctx.restore();

  // Non uniform scaling (x direction)
  ctx.strokeStyle = "#cf0";
  ctx.save()
  ctx.translate(50,250);
  ctx.scale(0.75,1);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(133.333,0);
  ctx.scale(0.75,1);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(177.777,0);
  ctx.scale(0.75,1);
  drawSpirograph(ctx,22,6,5);
  ctx.restore();
  
}
function drawSpirograph(ctx,R,r,O){
  var x1 = R-O;
  var y1 = 0;
  var i  = 1;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  do {
    if (i>20000) break;
    var x2 = (R+r)*Math.cos(i*Math.PI/72) 
      - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
    var y2 = (R+r)*Math.sin(i*Math.PI/72) 
     - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
    ctx.lineTo(x2,y2);
    x1 = x2;
    y1 = y2;
    i++;
  } while (x2 != R-O && y2 != 0 );
  ctx.stroke();
}

суббота, 3 декабря 2011 г.

Пример - rotate

function draw() {
  var ctx = document
                .getElementById('canvas')
                .getContext('2d');
  ctx.translate(75,75);
  for (i=1;i<6;i++){
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)
               +','+(255-51*i)+',255)';
    for (j=0;j<i*6;j++){
    ctx.rotate(Math.PI*2/(i*6));
    ctx.beginPath();
    ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
    ctx.fill();
    }
    ctx.restore();
  }
}

пятница, 2 декабря 2011 г.

Пример - translate

function draw() {
  var ctx = document
                 .getElementById('canvas')
                 .getContext('2d');
  ctx.fillRect(0,0,300,300);
  for (i=0;i<3;i++) {
    for (j=0;j<3;j++) {
      ctx.save();
      ctx.strokeStyle = "#9CFF00";
      ctx.translate(50+j*100,50+i*100);
      drawSpirograph(ctx,20*(j+2)/(j+1),
                         -8*(i+3)/(i+1),10);
      ctx.restore();
    }
  }
}
function drawSpirograph(ctx,R,r,O){
  var x1 = R-O;
  var y1 = 0;
  var i  = 1;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  do {
    if (i>20000) break;
    var x2 = (R+r)*Math.cos(i*Math.PI/72) 
       - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
    var y2 = (R+r)*Math.sin(i*Math.PI/72) 
      - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
    ctx.lineTo(x2,y2);
    x1 = x2;
    y1 = y2;
    i++;
  } while (x2 != R-O && y2 != 0 );
  ctx.stroke();
}

четверг, 1 декабря 2011 г.

Магия Без'E

Когда впервые запустил только что написанный скрипт я обалдел от эффекта, который просто ударил по моему сознанию. Начал пробывать и менять и в результате Вы видите что получилось

Страницы

Ярлыки

понедельник, 5 декабря 2011 г.

воскресенье, 4 декабря 2011 г.

суббота, 3 декабря 2011 г.

пятница, 2 декабря 2011 г.

четверг, 1 декабря 2011 г.

среда, 9 ноября 2011 г.

понедельник, 7 ноября 2011 г.

суббота, 5 ноября 2011 г.

четверг, 3 ноября 2011 г.

вторник, 1 ноября 2011 г.

понедельник, 24 октября 2011 г.

вторник, 18 октября 2011 г.

понедельник, 17 октября 2011 г.

пятница, 14 октября 2011 г.

среда, 12 октября 2011 г.

вторник, 11 октября 2011 г.

понедельник, 10 октября 2011 г.

среда, 5 октября 2011 г.

вторник, 4 октября 2011 г.

понедельник, 3 октября 2011 г.

среда, 28 сентября 2011 г.

вторник, 27 сентября 2011 г.

понедельник, 19 сентября 2011 г.

четверг, 25 августа 2011 г.

среда, 24 августа 2011 г.

пятница, 5 августа 2011 г.

четверг, 4 августа 2011 г.

понедельник, 5 декабря 2011 г.

воскресенье, 4 декабря 2011 г.

суббота, 3 декабря 2011 г.

пятница, 2 декабря 2011 г.

четверг, 1 декабря 2011 г.

среда, 9 ноября 2011 г.

понедельник, 7 ноября 2011 г.

суббота, 5 ноября 2011 г.

четверг, 3 ноября 2011 г.

вторник, 1 ноября 2011 г.

понедельник, 24 октября 2011 г.

вторник, 18 октября 2011 г.

понедельник, 17 октября 2011 г.

пятница, 14 октября 2011 г.

среда, 12 октября 2011 г.

вторник, 11 октября 2011 г.

понедельник, 10 октября 2011 г.

среда, 5 октября 2011 г.

вторник, 4 октября 2011 г.

понедельник, 3 октября 2011 г.

среда, 28 сентября 2011 г.

вторник, 27 сентября 2011 г.

понедельник, 19 сентября 2011 г.

четверг, 25 августа 2011 г.

среда, 24 августа 2011 г.

пятница, 5 августа 2011 г.

четверг, 4 августа 2011 г.