Как установить стили на холст html5?

Я использую приведенный ниже код, чтобы установить стили на «Холст». но я не могу установить "fillStyle" на холст. но strokeStyle и lineWidth работают нормально.

Init(){
     var can = byId('myCanvas');

        // get it's context
        hdc = can.getContext('2d');

        hdc.strokeStyle = 'red';
        hdc.lineWidth = 2;

        // Fill the path
        hdc.fillStyle = "#9ea7b8";
        hdc.fill();
}

//И вызываем функцию drawPoly с координатами.

function drawPoly(coOrdStr) {
        var canvas = byId('myCanvas');
        hdc.clearRect(0, 0, canvas.width, canvas.height);

        var mCoords = coOrdStr.split(',');
        var i, n;
        n = mCoords.length;
        hdc.beginPath();
        hdc.moveTo(mCoords[0], mCoords[1]);
        for (i = 2; i < n; i += 2) {
            hdc.lineTo(mCoords[i], mCoords[i + 1]);
        }
        hdc.lineTo(mCoords[0], mCoords[1]);
        hdc.stroke();

    }

кто-нибудь может помочь в этом?


person Bharathi    schedule 09.12.2013    source источник
comment
Я много раз менял цвет fillStyle. но никаких изменений.   -  person Bharathi    schedule 09.12.2013
comment
вам нужно указать, что вы хотите заполнить... прямоугольник, круг... вы закрыли свой контур штриха?   -  person cocco    schedule 09.12.2013
comment
Ты еще ничего не нарисовал.   -  person scrblnrd3    schedule 09.12.2013
comment
Я удалил все упоминания jQuery, потому что вопрос не имеет к ней никакого отношения. Нет методов jQuery для работы с холстом.   -  person Pavlo    schedule 10.12.2013


Ответы (1)


Вы не использовали какую-либо фигуру для заливки. Вам нужно добавить это. Я думаю, вы пытаетесь заполнить весь холст. Тогда это сработает для вас. Попробуйте это:

 var can=document.getElementById("myCanvas");
 var hdc=can.getContext("2d");
 hdc.strokeStyle = 'red';
 hdc.lineWidth = 2;
 hdc.fillStyle="#FF0000";
 hdc.fillRect(0,0,can.width,can.height);

Рабочая скрипка

person Milind Anantwar    schedule 09.12.2013
comment
@user2990596 user2990596: было бы здорово, если бы вы могли создать такую ​​же скрипку. - person Milind Anantwar; 10.12.2013