[JS] Домашно JavaScript APIs - 4 задача


5

Предлагам тук да обсъждаме елемента canvas и 4-та задача от JavaScript APIs.

Draw the following graphics using canvas:

canvas graphics

За да спестя малко писане съм ползвал библиотеката CanvasPlus: https://code.google.com/p/canvasplus/ (има функции и за чертаене на триъгълници, за ротация на фигурите).

Разбира се, може да се ползват и функциите от демото на Дончо "canvas-shapes.html". Ако някой ползва други по-удобни библиотеки за чертане, нека да пише.

HTML.

Демо.




Отговори



0
Извинявам се за offtopic-a но това домашно част от кой курс е ?
Javascript 2 ?

от nzhul (3415 точки)


0
Да, точно така, от JS 2 е.

от velin.koychev (1247 точки)

0
Супер! Пичовете наистина са в час с новите неща. Нямам търпение и ние да стигнем до там :)

от nzhul (3415 точки)



3

Моето решение:

Source

Няма какво да се каже допълнително, просто смяташ пиксели и чертаеш. Елипсите ги "сплесквах" със context.scale()


от GeorgiYolovski (1147 точки)


3

Едно творение и от мен.

Ползвал съм малко по-различни цветове, но иначе е г/д същото. :)


от iliyan.tanev (517 точки)


0

Demo

Source

Силно се надявам, че на изпита няма да има подобна нещо. Пикселче на ляво, 2 на дясно, 5 на горе... Цял ден ми изяде това домашно и пак не е pixel perfect... не че съм се стремял да бъде но това е друг въпрос :)


от saykor (8845 точки)


0
Дончо каза на изпита че ще има DOM манипулация или canvas, а по-вероятно и двете, но това не е още окончателен вариант. На подготовката за изпита ще видим ;-) Поздрави,


0
Мисълта ми е да не е просто ето ви тази картинка, нарисувайте я. Сигурно няма да е така. Иначе ще стане просто игра на гоненица с пиксели. :)

от saykor (8845 точки)


6

Решени са на елементарно ниво, използвала съм функциите, които Дончо обясни в лекцията, както и scale за сплескване на кръгове до елипси и setTransform. Важното при трансформиращи функции е да се запазят настройките преди това с ctx.save  и да се възстановят след това с ctx.restore, иначе всички елементи след командата scale например се трансформират.

Колело -сорс

Колело-демо

Къща -сорс

Къща-демо

Човек -сорс

Човек-демо

Ето и полезен линк с функции и пропъртита на canvas.

http://www.w3schools.com/tags/ref_canvas.asp




0
Много хубави са станали :-)

от vic.alexiev (2299 точки)

0
Благодаря ти много, много ме зарадва ;-)



2

Най-накрая и аз намерих време да допиша задачката :)
 

Demo

Source

За рисуване на елипса виждам, че някои колеги ползват bezier криви, някъде четох, че с тези криви не може да се изрисува елипса, а само визуално наподобява такава. Аз ползвам начина със скалиране:
 

function drawEllipse(center, dimensions, c) {
    var largestDimension = Math.max(dimensions.x, dimensions.y),
      scale = {x: dimensions.x / largestDimension, y: dimensions.y / largestDimension};

c.beginPath(); c.save(); c.scale(scale.x, scale.y); c.arc(center.x / scale.x, center.y / scale.y, largestDimension, 0, Math.PI * 2, false); c.restore(); }

от dsbonev (1234 точки)


0

Малко ми напомня за изпита по CSS :]]] 

http://jsbin.com/omayij/1


от RamiAmaire (1868 точки)


2

 

Здравейте, това е моето решение - html, House.js, Head.js, Cycle.js, demo.

Използвам три скрипт файла scripts/ House.js, scripts/ Head.js и scripts/ Cycle.js. Чрез функциите fillRect и strokeRect рисувам на правоъгъкници, чрез beginPath  moveTo и lineTo чертая на линии, чрез fill и stroke рисувам други фигури (триъгълници), чрез arc чертая на кръгове, а чрез scale и arc елипси.

Васко


от vkv.1986 (250 точки)


0

За тази задача си поиграх да направя изчертаването на отделните фигури изцяло зависимо от входните данни - left, top, width и height. За елипсите ползвам готови функции. Всичко останало е писано на ръка.

JavaScriptCode

Демо


от pirin (1101 точки)


0

Ето и мойте рисунки, демо.
Използвам три canvas с абсолютна позиция. както и методи за рисуване на елипса и правоъгълни за да избегна повтаряне на кода в голяма част.


от AsenVal (3487 точки)