Когда идея рисования JS прошла через мой мозг, я почувствовал, что это было интересно, поэтому я практиковал это. Чертежи JS представляют собой серию статей, которые первоначально касаются точек, линий и поверхностей.
Давайте сначала посмотрим на пример: http://www.zhaojz.com.cn/demo/draw5.html
немного
Мы используем тег SPAN, чтобы указать точку здесь
Кода -копия выглядит следующим образом:
// сканировать точку, размер, цвет, координаты и этикетки точки; Очевидно, что параметр Opts является объектом
Функциональная точка (Opts) {
document.write ("<span id = '"+opts.point [0]+""+opts.point [1]+"' style = 'Display: inline block; ширина:"+opts.pw+"px; рост:"+opts.ph+"px; фоновый цвет:"+opts.color+"; position: absool.+opts. "+opts.point [1]+" px; '> "+(opts.point [2]? (" <div style =' позиция: относительно; '> <span style =' Положение: абсолютное; слева: 5px; внизу: 1px; текст-альбонизатор: слева; ширина: 100px; '> "+opts.point [2]+" </span> </div> ")"/")") ")") ")") ")") ")") ")") "):"/")"): ")"): "/") "):"/")"): ")"
}
Несколько параметров:
opts.pw: ширина точки
Opts.ph: высота точки, как правило, равна Opts.pw
Opts.color: цвет точек
Opts.point: указывает положение точки, точка [0]: горизонтальное положение, точка [1]: вертикальная точка положения [2] является меткой точки
Примечание: атрибут позиции должен быть абсолютным;
2. Прямая линия
Прямая линия состоит из точек, поэтому нам нужно нарисовать более n точек между двумя точками. Визуально это прямая линия.
Кода -копия выглядит следующим образом:
// рисовать линии
// отправная точка PSTART
// wend конечная точка
// выбирают параметры
Наритка функции (PSTART, PEND, OPTS) {
var ph = 1;
var pw = 1;
var color = "Darkred";
if (Opts) {
Color = opts.color? Opts.color: Color;
}
var slope; //склон
var noslope = false; // Есть ли склон
var hdist = pend [0] - pStart [0];
var vdist = pend [1] - pStart [1];
if (hdist! = 0) {
slope = math.abs (vdist/hdist); // Рассчитайте наклон
}еще{
noslope = true; // Когда hdist = 0, прямая линия не имеет наклона
}
var gapp = pw> ph? PH: PW; // расстояние между соседними точками по умолчанию (точки пикселя в верхнем левом углу)
var diagonal = math.sqrt (math.pow (hdist, 2) + math.pow (vdist, 2)); // длина гипотенузы
var pn = parseint (Diagonal/Gapp); // рассчитать количество точек между двумя точками
if (pn <3) {pn = pn*3+1}; // Если количество точек составляет менее 3, увеличивайте количество точек; Почему +1, чтобы убедиться, что есть, по крайней мере, одна точка, когда pn = 0
var vgap = math.abs (vdist)/pn; // вертикальное расстояние между двумя соседними точками
var hgap = math.abs (hdist)/pn; // горизонтальное расстояние между двумя соседними точками
для (var i = 0; i <pn; i ++) {
// рисовать точки
// горизонтальное расстояние HGAP между двумя соседними точками
// Вертикальное расстояние VGAP между двумя соседними точками
// hgap*i*(pend [0] <pStart [0]?-1: 1: 1)*(noslope? 0: 1) Горизонтальное смещение из отправной точки
// vgap*i*(pend [1] <pStart [1]?-1: 1) Вертикальное смещение из отправной точки
// (Pend [0] <pStart [0]?-1: 1) Горизонтальное направление смещения
// (Pend [1] <pStart [1]?-1: 1) направление вертикального смещения
// (noslope? 0: 1) Когда у прямой линии нет наклона, горизонтальное смещение равен 0
DrawPoint ({
PW: PW,
PH: PH,
Цвет: цвет,
Точка: [(hgap*i*(pend [0] <pStart [0]?-1: 1: 1)*(noslope? 0: 1)+pStart [0]), (vgap*i*(pend [1] <pStart [1]?-1: 1)+pStart [1])]]]
});
}
}
Вы можете рисовать полилинии и поверхности на основе онлайн:
Полилина:
Кода -копия выглядит следующим образом:
// полилиний
// ps одномерный массив очков
функция DrawPolyline (ps) {
if (ps) {
// рисовать линии
for (var i = 0; i <ps.length-1; i ++) {
Линия Drawline (ps [i], ps [i+1]);
}
// поворачивать поворотный момент
for (var i = 0; i <ps.length; i ++) {
DrawPoint ({
PW: 3,
PH: 3,
Цвет: 'красный',
Точка: PS [I]
});
}
}
}
Полигоны:
Кода -копия выглядит следующим образом:
// многоугольник
// ps одномерный массив очков
Функция Drawpolygon (ps) {
if (ps) {
// рисовать линии
for (var i = 0; i <ps.length-1; i ++) {
Линия Drawline (ps [i], ps [i+1]);
}
// изменение закрыто
if (ps.length> 2) {
Наритка (PS [Ps.Length-1], PS [0])
}
// поворачивать поворотный момент
for (var i = 0; i <ps.length; i ++) {
DrawPoint ({
PW: 3,
PH: 3,
Цвет: 'красный',
Точка: PS [I]
});
}
}
}
прямоугольник:
Кода -копия выглядит следующим образом:
// Нарисуйте прямоугольник
// левша позиция точки в верхнем левом углу
//ширина
//высокий
функция DrawRectangle (левая крышка, ширина, высокая) {
Drawpolygon ([[[[[[[[[[[[[[[[[[
левые на крыше,
[Leftutop [0], LeftOp [1]+High],
[левая крышка [0]+ширина, левая крышка [1]+высокая],
[левая крыша [0]+ширина, левая крышка [1]]
]);
// заполнение
//document.write("<span style = 'height: "+(High-1)+" px; ширина: "+(ширина-1)+" px; фоновый цвет: "+" зеленый "+"; положение: абсолютное; слева: "+(левая поверхность [0] +1)+" px; top: "+(левая крышка [1] +1)+"'> </span> ";
}
Оказывается, JS может делать такие крутые вещи, это действительно нужно тщательно изучить