javascript - 塗りつぶしパターンを動的に変更する必要がある

Question

私はこのコードを実行しました: http://www.cozeez.co.uk/test.php

塗りつぶし画像を 3 つのボタンから 3 つの異なる色に変更するにはどうすればよいですか?

Answer 1

IDが「button1」、「button2」、「button3」の3つのボタンを追加します

現在のコードを書き直して、繰り返さないようにします（DRY）：

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で）：編集済み

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

または、好きな色、そしてもちろん変更したいキャンバスに応じて。