Заливка Canvas

<!DOCTYPE html> · July 8, 2011

Всем привет. Интересует следующее:

Обычный div можно залить картинкой, что бы она множилась, растягивалась и т.д., а есть ли такая же штука для canvas. Т.е. есть, например треугольник, нарисованный в canvas, как его можно залить изображением? И как указать заливку, слева направо, сверху в низ и т.д.?

Уточню еще для полной ясности. Залить надо не сам canvas, а нарисованную в нем фигуру.

Great Rash · July 8, 2011

https://developer.mozilla.org/en/canvas_tutorial

Все ответы тут

<!DOCTYPE html> · July 8, 2011

Спасибо, разобрался, кому интересно код залитого квадратика ниже:

    <script type="application/x-javascript">
      function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        // create new image object to use as pattern
        var img = new Image();
        img.src = 'images/bg.png';
        img.onload = function(){
          // create pattern
          var ptrn = ctx.createPattern(img,'repeat');
          ctx.fillStyle = ptrn;
          ctx.fillRect(0,0,150,150);
        }
      }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas"></canvas>
</body>

Sign In

Заливка Canvas

Question

<!DOCTYPE html>

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

<!DOCTYPE html>

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information