Презентация на тему "Html5 canvas"

Содержание

• 
  Слайд 1

  HTML5 Canvas

• 
  Слайд 2

  Графіка у WEB

• 
  Слайд 3

  Загальний вигляд HTML документа

• 
  Слайд 4

  Редактори розмітки

• 
  Слайд 5

  Події та методи в JavaScript

  onclick onload document.getElementById(‘id’) document.getElementByTagName(“A”) What is debugger? How to use debugger?

• 
  Слайд 6

  Stroke & Fill

• 
  Слайд 7

  Базові поняття в HTML5 CanvasРобота з примітивами

  fillStyle = color-визначає колір заливки strokeStyle = color-колір ліній, який задається точно так само як і css strokeRect (x, y, ширина, висота) – Малює прямокутник fillRect (x, y, ширина, висота) – Малює зафарбований прямокутник clearRect (x, y, ширина, висота) – Очищає область на полотні розміром з прямокутник заданого розміру.

• 
  Слайд 8

  Базові поняття в HTML5 CanvasМалювання складних форм

  БлокbeginPath() БлокиmoveTo (x, y) lineTo (x, y) closePath ()stroke ()fill() Fill Line Line Line Line Stroke Line Line Line

• 
  Слайд 9

  Базові поняття в HTML5 CanvasКриві Без’є

• 
  Слайд 10

  Приклад 1. Малювання прямокутника

• 
  Слайд 11

  Приклад 2. Малювання заштрихованих малюнків

• 
  Слайд 12

  Приклад 3. Заливка малюнків

• 
  Слайд 13

  Приклад 4.Малювання кривих Без’є

• 
  Слайд 14

  Приклади використання Canvas

• 
  Слайд 15
  
• 
  Слайд 16
  
• 
  Слайд 17
  
• 
  Слайд 18

  Якісь питання?

• 
  Слайд 19

  Дякую за увагу