如何使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函數來繪製幾個畫布與定義的變量（例如，顏色套）。實際上，我想用由draw(variables)提供的變量（例如顏色）替換畫布ID和其選項（如顏色）。 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);

編輯

這是jsfiddle example

來源

2012-05-19 17:37:43 Neil

如何使HTML5畫布

回答

相關問題