需要動態地改變我做了這個代碼填充圖案

Question

：http://www.cozeez.co.uk/test.php

如何從3個按鈕填充圖像更改爲3點不同的顏色？

Answer 1

添加三個按鈕ID '按鈕1'， '按鈕2'， 'BUTTON3'

重寫當前的代碼，所以你不要重複自己（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） ：EDITED

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

或者任何你想要的顏色，取決於你想改變的畫布。