2

単純なキャンバスを次のように考えます

$(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);
4

2 に答える 2

1

これを試して：

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-19T17:36:49.947 に答える
1

これがあなたがそれをすることができる1つの方法です：

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の例です

于 2012-05-19T17:37:43.320 に答える