W3docs
ru
Войти

Рисование на Canvas

On this page, you can find useful information about the HTML <canvas> element, as well as to learn to draw with canvas step by step with our code examples.

JavaScript используется для рисования на холсте. Мы сделаем это шаг за шагом.

1. Найдите элемент Canvas

Чтобы найти элемент canvas, используйте метод HTML DOM: getElementById():

Рисование на Canvas

var canvas=document.getElementById("canvas");

2. Создайте объект рисования

Используйте метод getContext() для получения контекста рисования, который предоставляет свойства и методы:

Рисование на Canvas

var ctx = canvas.getContext("2d");

3. Рисование на элементе Canvas

Теперь вы можете рисовать на холсте. Свойство fillStyle может быть цветом CSS, узором или градиентом.

Рисование на Canvas

ctx.fillStyle = "#1c87c9";

Вы также можете использовать метод fillRect(x, y, width, height) для рисования залитого прямоугольника на холсте. Параметры указывают координаты x и y верхнего левого угла, за которыми следуют ширина и высота:

Рисование на Canvas

ctx.fillRect(0, 0, 230, 130);

Пример HTML-тега <canvas>:

Пример HTML-тега <canvas>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#1c87c9";
      ctx.fillRect(0, 0, 230, 130)
    </script>
  </body>
</html>
Попробуйте сами »

Practice

Практика

Какие элементы необходимы для рисования на HTML canvas?