需要动态更改填充模式

Question

我已完成此代码：http://www.cozeez.co.uk/test.php

如何将填充图像从3个按钮更改为3种不同的颜色？

Answer 1

添加三个ID为“button1”，“button2”，“button3”

的按钮

重写您当前的代码，这样您就不会重复自己（干）：

function fillCircle(canvasId, color) {
    var canvas=document.getElementById(canvasId);
    var cxt=canvas.getContext("2d");

    var imageObj = new Image();
    imageObj.src = "images/" + color + ".jpg";
    imageObj.onload = function() {
        var pattern = cxt.createPattern(imageObj, "repeat");
        cxt.fillStyle=pattern;
        cxt.fill();
    }


    cxt.beginPath();
    cxt.arc(51,51,50,0,Math.PI*2,true);
    cxt.closePath();
    cxt.stroke();
} 

fillCircle("myCanvas", "pink");
fillCircle("myCanvas2", "green");

添加（使用jQuery）：EDITED

$('#button1').click(function() {fillCircle("myCanvas", "blue")});
$('#button2').click(function() {fillCircle("myCanvas", "red")});
$('#button3').click(function() {fillCircle("myCanvas", "yellow")});

或者你想要的任何颜色，当然还有你要改变的画布。