Нужно динамически менять шаблон заливки - PullRequest
Новая
       12

Нужно динамически менять шаблон заливки

0 голосов
/ 07 апреля 2011

Я сделал этот код: http://www.cozeez.co.uk/test.php

Как изменить изображение заливки с 3 кнопок на 3 разных цвета?

1 Ответ

1 голос
/ 07 апреля 2011

Добавьте три кнопки с идентификатором «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): РЕДАКТИРОВАНИЕ 

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

Или любые цвета, которые вы хотите, и в зависимости от того, какой холст вы хотите изменить, конечно.

...