Статьи / JavaScript / Canvas


Рисуем прямые линии

// создаем элемент canvas в документе, чтобы в нём рисовать

var m = document.querySelector('.web');
m.innerHTML = '<canvas id="canvas"></canvas>';


// функция для рисования кривой, взята с mdc
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0); // подложку рисуем в координатах top=0, left=0
ctx.beginPath();
ctx.moveTo(15,13); // переходим в точку top=15, left=13
ctx.lineTo(70,66); // затем в точку top=70, left=66
ctx.lineTo(103,76); // и т.д.
ctx.lineTo(170,15);
ctx.stroke(); // рисуем штрихом(контур)
};
img.src = '/img/logotip.png';
}
draw();


Откройте консоль и выполните там вышеприведенный код, вы увидите три наклонные линии нарисованные на логотипе.