javascript - 如何为html5 canvas制作jQuery函数

把一个简单的画布看作

$(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)提供的变量替换canvas id及其选项（比如color），例如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);

最佳答案

试试这个：

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

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

      }
    }

关于javascript - 如何为html5 canvas制作jQuery函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10667394/