Рисуем и наносим квадратные квадраты динамически, используя холст HTML

Question

Мне нужно нарисовать эту диаграмму, приведенную ниже, используя HTML-холст. Может кто-нибудь помочь мне.

http://1.bp.blogspot.com/-em2abcEg5nU/Ts_c3cNtfMI/AAAAAAAAABU/eQWc6SJtD0M/s1600/t31.jpg

Answer 1

Сначала получите доступ к холсту:

var can=document.getElementById('canvas1')

Теперь вам нужен контекст для выполнения функций рисования:

var pen=can.getContext('2d')

Чтобы нарисовать линию, сделайте следующее:

pen.beginPath()
pen.moveTo(0,0)
pen.lineTo(50,50)
pen.closePath()
pen.strokeStyle=rgb(255,0,0)
pen.stroke()

Чтобы заполнить путь (например, треугольник), сделайте следующее:

pen.beginPath()
pen.moveTo(0,0)
pen.lineTo(50,50)
pen.lineTo(0,50)
pen.closePath()
pen.fillStyle=rgb(255,0,0)
pen.fill()