Компютърна графика Javascript


2014-01-21 23_48_03-ivel.in_geometry_index.php_gridlines=1&rasterization=5&pointsize=4&submit=ApplyДомашна работа по Компютърна графика. Чертане на линии или окръжности по метода на Брезенхам, от двата края към средата, чертане на кръг по метода на закръглянето и запълване на граници, чрез стек.
Създал съм библиотека на Javascript, която работи в Canvas от HTML и позволява чертането на фигурите лесно и удобно.
Свързал съм я със самия Canvas и позволявам чертане, чрез мишката. Както и съм добавил опции начина на чертане и самото платно. Библиотеката позволява и работа с растеризация, което се иска, за да се види точният метод на чертане и разликата между методите.

Graphics lib

Начин на използване:

<script src="graphics.js"></script>

<canvas id="myCanvas" width="700" height="700" style="border:1px solid #c3c3c3;"></canvas>

<script>
//wzimame canvas-a
var canvas = document.getElementById("myCanvas");
//vzimame i context-a na canvasa
var context = canvas.getContext("2d");

//inizializirame bibliotekata
var rasterization = 10;
var pointSize = 3
var boundryColor = #444444;

var graphics = new Graphics(context, canvas, rasterization, pointSize, boundryColor);

//za se nachertae mrejata na tochkite
graphics.drawGrid();

//za da se smeni cveta
graphics.setColor("#ff0000");
graphics.setBoundryColor("#ff0000");

//i drugite funkcii
graphics.drawPoint(x,y); //dobavq pixel na poziciq
graphics.getPoint(x,y); //vzima cveta na poziciqta
graphics.drawBresenhamLineFromSidesToMid(x1, y1, x2, y2);
graphics.drawBresenhamLine(x1, y1, x2, y2);
graphics.drawSimpleCircle(xc, yc, R);
graphics.drawBresenhamCircle(xc, yc, R);
graphics.StackedBoundryFill_4(x, y);

Към повечето публични функции има и дублиращи функции (с наставка UnRasterized), който правят същото, но с допълнителна функция за растеризация. Тя позволява да се предадат директно координатите от Canvas-a и в зависимост от нивото на растеризация да се изчислят правилните обекти. Може да се ползват и без растеризация, като се въведе rasterization = 1;

Интернет страница: https://ivel.in/geometry

  1. Няма коментари.
(will not be published)