Как да направите jQuery функция за html5 canvas

Помислете за просто платно като

$(document).ready(function(){
draw();
});
    function draw() {  
      var canvas = document.getElementById("canvas");  
      if (canvas.getContext) {  
        var ctx = canvas.getContext("2d");  

        ctx.fillStyle = "rgb(200,0,0)";  
        ctx.fillRect (10, 10, 55, 50);  

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
        ctx.fillRect (30, 30, 55, 50);  
      }  
    }

Как мога да въведа променлива във функцията jQuery, за да нарисувам няколко платна с дефинирана променлива (напр. набор от цветове).

Всъщност искам да заменя идентификатора на платното и неговите опции (като цвят) с променлива, предоставена от draw(variables), напр.draw(canvas_id, color, ...).

Пример: (за създаване на няколко платна върху различни DOM елементи)

    function draw(ccc) {  
      var canvas = document.getElementById(ccc);  
      if (canvas.getContext) {  
        var ctx = canvas.getContext("2d");  

        ctx.fillStyle = "rgb(200,0,0)";  
        ctx.fillRect (10, 10, 55, 50);  

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
        ctx.fillRect (30, 30, 55, 50);  
      }  
    } 

draw(canvas1);
draw(canvas2);

javascript canvas html jquery html5-canvas
person Googlebot    schedule 19.05.2012    source източник
comment
какво точно искаш Ако вашият draw() е в глобален обхват, можете просто да използвате някои глобални променливи, защо да си правите труда да въвеждате променливи в $(document).ready(function(){ draw(); });?   -  person xiaoyi    schedule 19.05.2012
comment
@xiaoyi Искам да избегна повтарянето на целия код за всяко ново платно в документа. Искам да имам функция с променлива. След това за всяко платно трябва да дефинирам draw(list of variables)   -  person Googlebot    schedule 19.05.2012
comment
Тогава откъде идват параметрите? Това дефинирано ли е ръчно, изчислено въз основа на контекста?   -  person xiaoyi    schedule 19.05.2012
comment
@xiaoyi добавих пример за това, което имах предвид. Основният параметър е canvas_id.   -  person Googlebot    schedule 19.05.2012
comment
@xiaoyi Разбрах мнението ти за $(document).ready(function(){; благодаря за пояснението.   -  person Googlebot    schedule 19.05.2012

Отговори (2)


arrow_upward
1
arrow_downward

Опитайте тази:

function draw(id, clr, fill) {  
      var canvas = document.getElementById(id);  
      if (canvas.getContext) {  
        var ctx = canvas.getContext("2d");  

        ctx.fillStyle = clr;  
        ctx.fillRect (fill);  

      }  
    }
person undefined    schedule 19.05.2012

arrow_upward
1
arrow_downward

Ето един начин, по който можете да го направите:

function draw(colors) {  
  var canvas = document.getElementById("canvas");  
  if (canvas.getContext) {  
    var ctx = canvas.getContext("2d");  

      for(var i=0; i < colors.length; i ++){
          ctx.fillStyle = colors[i];  
          ctx.fillRect (10*i, 10*i, 55, 50);
      } 
  }  
}

// define some colors in an array
var colors = ["rgb(200,0,0)","rgba(0, 0, 200, 0.5)","rgba(0, 128, 200, 0.5)"];

draw(colors);

РЕДАКТИРАНЕ

Ето пример за jsfiddle

person Neil    schedule 19.05.2012