HTML5 Canvas Rectangle

Содержание
  1. Рисование прямоугольников Чтобы нарисовать прямоугольник, укажите координаты x и y (верхний левый угол), а также высоту и ширину прямоугольника. Существует три метода прямоугольника: fillRect () strokeRect () clearRect () Метод fillRect () Метод fillRect () используется для заливки прямоугольника текущим цветом, градиентом или узором. Синтаксис: ctx .fillRect (x, y, ширина, высота) Параметры Тип Описание x число Координата x (в пикселях) верхнего левого угла прямоугольника относительно координат холста. y number Координата y (в пикселях) верхнего левого угла прямоугольника относительно координат холста. width number Ширина (в пикселях) прямоугольника. height number Высота (в пикселях) прямоугольника. Примечание: если параметр ширины или высоты равен нулю, этот метод не действует. Пример: прямоугольник холста HTML5 с использованием метода fillRect () Следующий веб-документ заполняет прямоугольник свойством fillStyle. Вывод: Код: Пример прямоугольника var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d '); ctx.fillStyle = '# fa4b2a'; //цвет заливки ctx.fillRect (10, 40, 140, 160); //создаем прямоугольник}

    Метод strokeRect ()

    Используется метод strokeRect () для заливки прямоугольника текущим цветом, градиентом или узором.

    Синтаксис:

     ctx.strokeRect (x, y, width, height) 
    Параметры Тип Описание
    x number Координата x (в пикселях) верхнего левого угла прямоугольника по отношению к координаты холста.
    y number Координата y (в пикселях ) левого верхнего угла прямоугольника относительно координат холста.
    width number Ширина (в пикселях) прямоугольника.
    height number Высота (в пикселях) прямоугольника.

    Пример: прямоугольник холста HTML5 с использованием метода fillRect ()

    Веб-документ рисует прямоугольники с помощью с использованием strokeStyle, lineJoin и lineWidth для различных эффектов.

    Вывод:

    Код:

          Пример прямоугольника       var canvas = document.getElementById (  "DemoCanvas"); если (холст.getContext) {var ctx = canvas.getContext ('2d');  ctx.lineWidth = "3";  ctx.strokeStyle = "красный";  ctx.strokeRect (5, 5, 300, 250);  ctx.lineWidth = "25";  ctx.lineJoin = "скос";  ctx.strokeStyle = "синий";  ctx.strokeRect (150, 200, 300, 150);  ctx.lineJoin = "круглый";  ctx.lineWidth = "45";  ctx.strokeStyle = "зеленый";  ctx.strokeRect (250, 50, 150, 250);}
    Метод clearRect ()
    
    
    Метод clearRect () используется для очистки прямоугольника (стирание области до прозрачного черного цвета).
    
    
    Синтаксис:
    ctx.clearRect (x, y, width, height)
    Параметры
    Тип
    Описание
    x
    number
    Координата x (в пикселях), верхний-  левый угол прямоугольника относительно координат холста.
    y
    number
    Координата Y (в пикселях) верхнего левого угла прямоугольника относительно координат холста.
    width
    number
    Ширина (в пикселях) прямоугольника.
    height
    number
    Высота (в пикселях) прямоугольника.
    
    
    Пример: прямоугольник холста HTML5 с использованием метода clearRect ()
    
    
    Веб-документ рисует серию прямоугольников с помощью методов fillRect () и clearRect ().
    
    
    Вывод:
    
    
    
    
    
    Код:
     Пример прямоугольника       var canvas = document.getElementById ("DemoCanvas"); if (canvas.  getContext) {var ctx = canvas.getContext ('2d');  ctx.fillStyle = 'зеленый'; //цвет заливки var y = 40, h = 300, w = 260; for (var x = 10; x! = 140; x = x + 10) {ctx.fillRect (x, y, h, w);  ctx. clearRect (x + 5, y + 5, h-10, w-10);  у = у + 10;  ч = ч-20;  ш = ш-20;  }}
    
    
    Редактор кода:
    
    
    См.  Общий редактор Pen html css от w3resource (@ w3resource) onCodePen.
    
    
    
  2. Метод fillRect ()
  3. Метод clearRect ()

Рисование прямоугольников

Чтобы нарисовать прямоугольник, укажите координаты x и y (верхний левый угол), а также высоту и ширину прямоугольника. Существует три метода прямоугольника:

  • fillRect ()
  • strokeRect ()
  • clearRect ()

Метод fillRect ()

Метод fillRect () используется для заливки прямоугольника текущим цветом, градиентом или узором.

Синтаксис:

 ctx  .fillRect (x, y, ширина, высота) 
Параметры Тип Описание

x

число Координата x (в пикселях) верхнего левого угла прямоугольника относительно координат холста.
y number Координата y (в пикселях) верхнего левого угла прямоугольника относительно координат холста.
width number Ширина (в пикселях) прямоугольника.
height number Высота (в пикселях) прямоугольника.

Примечание: если параметр ширины или высоты равен нулю, этот метод не действует.

Пример: прямоугольник холста HTML5 с использованием метода fillRect ()

Следующий веб-документ заполняет прямоугольник свойством fillStyle.

Вывод:

Код:

      Пример прямоугольника       var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d  ');  ctx.fillStyle = '# fa4b2a'; //цвет заливки ctx.fillRect (10, 40, 140, 160); //создаем прямоугольник}     

Метод strokeRect ()

Используется метод strokeRect () для заливки прямоугольника текущим цветом, градиентом или узором.

Синтаксис:

 ctx.strokeRect (x, y, width, height) 
Параметры Тип Описание
x number Координата x (в пикселях) верхнего левого угла прямоугольника по отношению к координаты холста.
y number Координата y (в пикселях ) левого верхнего угла прямоугольника относительно координат холста.
width number Ширина (в пикселях) прямоугольника.
height number Высота (в пикселях) прямоугольника.

Пример: прямоугольник холста HTML5 с использованием метода fillRect ()

Веб-документ рисует прямоугольники с помощью с использованием strokeStyle, lineJoin и lineWidth для различных эффектов.

Вывод:

Код:

      Пример прямоугольника       var canvas = document.getElementById (  "DemoCanvas"); если (холст.getContext) {var ctx = canvas.getContext ('2d');  ctx.lineWidth = "3";  ctx.strokeStyle = "красный";  ctx.strokeRect (5, 5, 300, 250);  ctx.lineWidth = "25";  ctx.lineJoin = "скос";  ctx.strokeStyle = "синий";  ctx.strokeRect (150, 200, 300, 150);  ctx.lineJoin = "круглый";  ctx.lineWidth = "45";  ctx.strokeStyle = "зеленый";  ctx.strokeRect (250, 50, 150, 250);}    

Метод clearRect ()

Метод clearRect () используется для очистки прямоугольника (стирание области до прозрачного черного цвета).

Синтаксис:

 ctx.clearRect (x, y, width, height) 
Параметры Тип Описание

x

number Координата x (в пикселях), верхний- левый угол прямоугольника относительно координат холста.
y number Координата Y (в пикселях) верхнего левого угла прямоугольника относительно координат холста.
width number Ширина (в пикселях) прямоугольника.
height number Высота (в пикселях) прямоугольника.

Пример: прямоугольник холста HTML5 с использованием метода clearRect ()

Веб-документ рисует серию прямоугольников с помощью методов fillRect () и clearRect ().

Вывод:

Код:

      Пример прямоугольника       var canvas = document.getElementById ("DemoCanvas"); if (canvas.  getContext) {var ctx = canvas.getContext ('2d');  ctx.fillStyle = 'зеленый'; //цвет заливки var y = 40, h = 300, w = 260; for (var x = 10; x! = 140; x = x + 10) {ctx.fillRect (x, y, h, w);  ctx. clearRect (x + 5, y + 5, h-10, w-10);  у = у + 10;  ч = ч-20;  ш = ш-20;  }}    

Редактор кода:

См. Общий редактор Pen html css от w3resource (@ w3resource) onCodePen.

Оцените статью
nanomode.ru
Добавить комментарий