Как сделать функцию JQuery для html5 холст

Рассмотрим простой холст какКак сделать функцию JQuery для html5 холст

$(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, чтобы нарисовать несколько холстов с определенной переменной (например, цвет комплект).

Фактически, я хочу заменить идентификатор canvas и его параметры (например, цвет) с переменной, предоставленной 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);

источник

2012-05-19 Googlebot

Что именно вы хотите? Если ваша draw() находится в глобальной области действия, вы можете просто использовать некоторые глобальные переменные, зачем вводить переменные в '$ (document) .ready (function() {draw();});'? – xiaoyi

@xiaoyi Я хочу избежать повторения всего кода для каждого нового холста в документе. Я хочу иметь функцию с переменной. Тогда для каждого холста мне нужно определить 'draw (список переменных)' – Googlebot

Тогда откуда берутся параметры? Это определено вручную, рассчитанное на основе контекста? – xiaoyi

попробовать это:

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

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

     } 
    }

источник

2012-05-19 17:36:49 undefined

Вот один из способов вы можете сделать это:

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

EDIT

jsfiddle example

источник

2012-05-19 17:37:43 Neil

Как сделать функцию JQuery для html5 холст

ответ

Смежные вопросы