javascript - 需要动态改变填充图案

Question

我已经完成了这段代码： http: //www.cozeez.co.uk/test.php

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

Answer 1

添加 id 为“button1”、“button2”、“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")});

或者你想要的任何颜色，当然取决于你想要改变的画布。