Цель работы
Изучить возможности рисования на веб-странице.
Задания
Задание 1
Создайте гистограмму, используя элемент Canvas.
Порядок выполнения:
     1. Создайте чистый лист для рисования. Определите функцию (например, drawgist).
     2. Используя moveTo() и lineTo(), начертите оси.
     3. Используя fillText(), добавьте обозначения. Задайте тексту размер, начертание, шрифт.
     4. Объектами гистограммы будут служить прямоугольники - fillRect(). Нарисуйте их необходимое количество над горизонтальной осью. Задайте различные цвета, примените градиентную заливку, заливку изображением (функция createPattern()).
     5. Добавьте детали к графику для лучшей визуализации информации.
Решение
HTML5 
<canvas id="drawArea" width="1420" height="720"></canvas>
Java Script 
let canvas = document.getElementById("drawArea")
let drawArea = canvas.getContext("2d")
drawArea.beginPath()

// рисуем оси
drawArea.moveTo(100, 50)
drawArea.lineTo(100, 640)
drawArea.lineTo(1300, 640)

// рисуем стрелки для координатных осей
// для Оу
drawArea.moveTo(100, 50)
drawArea.lineTo(95, 60)

drawArea.moveTo(100, 50)
drawArea.lineTo(105, 60)

// для Ох
drawArea.moveTo(1300, 640)
drawArea.lineTo(1290, 635)

drawArea.moveTo(1300, 640)
drawArea.lineTo(1290, 645)

// добавляем подписи к осям
drawArea.font = '22px Arial'
drawArea.fillStyle = '#a5a5a5'
drawArea.fillText('Гистограмма 1, Время обучения в различных учебных заведениях', 370, 700)

drawArea.font = '18px Arial'
drawArea.fillStyle = '#000'
drawArea.fillText('Годы', 40, 50)
drawArea.fillText('Учебное заведение', 1200, 670)
                        
// добавляем разметку на оси Оу и Ох
drawArea.moveTo(100, 640)
drawArea.strokeStyle = '#000'
drawArea.arc(100, 640, 3, 0, 6.3)
drawArea.fillText('0', 80, 660)
                        
drawArea.moveTo(100, 540)
drawArea.arc(100, 540, 3, 0, 6.3)
drawArea.fillText('2', 80, 545)
                        
drawArea.moveTo(100, 440)
drawArea.arc(100, 440, 3, 0, 6.3)
drawArea.fillText('4', 80, 445)
                        
drawArea.moveTo(100, 340)
drawArea.arc(100, 340, 3, 0, 6.3)
drawArea.fillText('6', 80, 345)
                        
drawArea.moveTo(100, 240)
drawArea.arc(100, 240, 3, 0, 6.3)
drawArea.fillText('8', 80, 245)
                        
drawArea.moveTo(100, 140)
drawArea.arc(100, 140, 3, 0, 6.3)
drawArea.fillText('10', 70, 145)
                        
drawArea.moveTo(100, 90)
drawArea.arc(100, 90, 3, 0, 6.3)
drawArea.fillText('11', 70, 95)
                        
// добавляем обьекты на гистограмму
drawArea.fillStyle = '#ff6537'
drawArea.fillRect(200, 490, 200, 150)
drawArea.font = '20px Arial'
drawArea.fillStyle = '#fff'
drawArea.fillText('Детский сад', 245, 525)
                        
let linearGradient = drawArea.createLinearGradient(200, 440, 400, 640)
linearGradient.addColorStop(0.0, 'coral')
linearGradient.addColorStop(1.0, 'orange')
drawArea.fillStyle = linearGradient
drawArea.fillRect(500, 90, 200, 550)
drawArea.fillStyle = '#fff'
drawArea.fillText('Школа', 568, 125)
                        
                        
// let imgGradient = drawArea.createPattern(img, "repeat")
drawArea.fillStyle = "red"
drawArea.fillRect(800, 440, 200, 200)
drawArea.fillStyle = '#fff'
drawArea.fillText('Университет', 845, 475)
                        
// добавляем некоторые стили
drawArea.lineWidth = '3'
drawArea.lineCap = 'round'
drawArea.lineJoin = 'round'
drawArea.stroke()
Выполнить код
Задание 2
Создайте диаграмму, используя элемент Canvas.
Порядок выполнения:
     1. Перед началом написания кода, просчитайте необходимые значения градусов (процентов), опираясь на данные.
     2. Определите функцию (например, drawdiagr).
     3. Используя arc(), нарисуйте круг-основу.
     4. Нарисуйте сектора. Для этого удобно создать универсальную функцию, которая, получая значения центра окружности, радиуса, начального и конечного угла, направления, будет рисовать необходимую часть диаграммы. Функция также должна заливать объект цветом.
     5. Используя fillText(), добавьте обозначения. Задайте тексту размер, начертание, шрифт. К надписи названия диаграммы добавьте тень.
Решение
HTML5 
<canvas id="drawArea" width="1420" height="720"></canvas>
Java Script 
let canvas = document.getElementById("drawArea")
let drawArea = canvas.getContext("2d")
                        
function drawSection(x, y, radius, startAngle, endAngle, fillColor, strokeColor){
    drawArea.beginPath()
    drawArea.moveTo(x, y)
    drawArea.fillStyle = fillColor
    drawArea.strokeStyle = strokeColor
    drawArea.arc(x, y, radius, startAngle, endAngle)
    drawArea.lineTo(x, y)
    drawArea.fill()
    drawArea.stroke()
}
                        
// рисуем сектора
drawSection(350, 350, 260, 0, (Math.PI/180)*60, 'coral', 'coral')
drawSection(350, 350, 260, (Math.PI/180)*60, (Math.PI/180)*280, 'orange', 'orange')
drawSection(350, 350, 260, (Math.PI/180)*280, 0, '#ff4800', '#ff4800')
                        
// добавляем обозначения
drawArea.beginPath()
drawArea.font = '36px Arial'
drawArea.fillStyle = 'coral'
drawArea.fillText('Детский сад', 860, 255)
drawArea.fillRect(800, 230, 30, 30)
                        
drawArea.beginPath()
drawArea.fillStyle = 'orange'
drawArea.fillText('Школа', 860, 355)
drawArea.fillRect(800, 330, 30, 30)
                        
drawArea.beginPath()
drawArea.fillStyle = '#ff4800'
drawArea.fillText('Университет', 860, 455)
drawArea.fillRect(800, 430, 30, 30)
                        
// добавляем подпись
drawArea.beginPath()
drawArea.font = '22px Arial'
drawArea.fillStyle = '#222'
drawArea.shadowOffsetX = 2
drawArea.shadowOffsetY = -2
drawArea.shadowColor = '#555'
drawArea.shadowBlur = 5
drawArea.fillText('Диаграмма 1, Время обучения в различных учебных заведениях', 370, 700)
drawArea.closePath()
                        
drawArea.lineWidth = '1'
drawArea.lineCap = 'round'
drawArea.lineJoin = 'round'
Выполнить код