HTML5 Canvas реализует пример Translation/Scaling/Roving Deom (с скриншотом)

Комментарий: HTML5 Canvas предоставляет графический API, который может быть реализован, с помощью которого вы можете просто реализовать перевод, вращение, масштабирование и т. Д. Позвольте мне поделиться с вами конкретной реализацией перевода, вращения, масштабирования и эталонных изображений. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для вас.

Переводить

Перевести координаты Перевод (x, y) означает перевод координат (0,0) в (x, y), а исходные (0,0) координаты становятся (-x, -y)

Иллюстрация заключается в следующем:

Точка координаты любой исходной точки координаты P (OX, OY) после трансляции P (OX-X, OY-Y), где точка (x, y)-это трансляция

Координата точки перевод (x, y).

Демонстрация кода:

// Перевод

функция rendertext (ширина, высота, контекст) {

Context.translate (ширина / 2, высота / 2); // координаты центральной точки (0, 0)

context.font = "18px arial";

context.fillstyle = "Blue";

context.filltext («Пожалуйста, нажмите <ESC>, чтобы выйти из игры», 5,50);

context.translate (-width/2, -height/2); // координаты восстановления перевода (0,0) являются верхним левым углом

context.filltext («Я вернулся на вершину», 5,50);

}

Шкала

Шкала (a, b) означает масштабировать объект вдоль оси Xy до размеров*x, b*y соответственно. Эффект показан на рисунке:

// Перевод прямоугольника.

Функция DrawPath (контекст) {

Context.translate (200 200);

context.scale (2,2); // масштабировать два раза размер исходной формы

context.strokestyle = "green";

context.beginpath ();

context.moveto (0,40);

context.lineto (80,40);

context.lineto (40,80);

context.closepath ();

Context.Stroke ();

}

Повернуть

Поверните угол поворота (Math.pi/8)

Координаты p (x, y) до вращения являются p (rx, ry) после соответствующего вращения

Rx = x * cos (-Angle)-y * sin (-Angle);

Ry = y * cos (-Angle) + x * sin (-Angle);

Вращение 90 градусов может быть упрощено до:

Rx = y;

Ry = -x;

Направление вращения по умолчанию в холсте составляет по часовой стрелке. Демо -код заключается в следующем:

// new Point.x = x * cos (-Angle) -y * sin (-Angle),

// new Point.y = y * cos (-Angle) +x * sin (-Angle)

функция renderroTateText (context) {

context.font = "24px arial";

context.fillstyle = "red";

context.filltext («Я здесь !!!», 5,50);

// вращать -90 градусов

// context.rotate (-math.pi/2);

// context.fillstyle = "blue";

// context.filltext («Я здесь !!!», -400,30);

// поворачивать 90 градусов

context.rotate (math.pi/2);

context.fillstyle = "Blue";

context.filltext («Я здесь !!!», 350, -420);

console.log (math.sin (math.pi/2));

// rotae 90 градусов и нарисовать 10 линий

context.fillstyle = "green";

для (var i = 0; i <4; i ++) {

var x = (i+1)*20;

var y = (i+1)*60;

var newx = y;

var newy = -x;

context.fillrect (Newx, Newy, 200, 6);

}

}

Обычная практика состоит в том, чтобы использовать вращение и перевод, сначала перевести координаты (0,0) в центр.

Перевести (ширина/2, высота/2), а затем поверните (math.pi/2), чтобы завершить вращение

Пример кода заключается в следующем:

Функция saveandrestorecontext (context) {

context.save ();

Context.translate (200 200);

context.rotate (math.pi/2);

context.fillstyle = "черный";

context.filltext («2D контекст вращается и переводит», 10, 10);

context.restore ();

context.filltext («2D контекст вращается и переводит», 10, 10);

}

Весь код JavaScript:

var tempcontext = null; // глобальная переменная 2D контекст

window.onload = function () {

var canvas = document.getElementbyId ("target");

Canvas.width = 450;

Canvas.height = 450;

if (! canvas.getContext) {

console.log («Canvas не поддерживается. Пожалуйста, установите браузер, совместимый с HTML5.»);

возвращаться;

}

// Получить 2D контекста холста и нарисовать изображение

tempcontext = canvas.getContext ("2d");

// rendertext (canvas.width, canvas.height, tempcontext);

saveandrestorecontext (tempcontext);

// DrawPath (TempContext);

}

// Перевод

функция rendertext (ширина, высота, контекст) {

Context.translate (ширина / 2, высота / 2);

context.font = "18px arial";

context.fillstyle = "Blue";

context.filltext («Пожалуйста, нажмите <ESC>, чтобы выйти из игры», 5,50);

context.translate (-width/2, -height/2);

context.filltext («Я вернулся на вершину», 5,50);

}

// Перевод прямоугольника.

Функция DrawPath (контекст) {

Context.translate (200, 200);

context.scale (2,2); // масштабировать дважды размер исходной формы

context.strokestyle = "green";

context.beginpath ();

context.moveto (0, 40);

context.lineto (80, 40);

context.lineto (40, 80);

context.closepath ();

Context.Stroke ();

}

// new Point.x = x * cos (-Angle)-y * sin (-Angle),

// new Point.y = y * cos (-Angle) + x * sin (-Angle)

функция renderroTateText (context) {

context.font = "24px arial";

context.fillstyle = "red";

context.filltext («Я здесь !!!», 5,50);

// вращать -90 градусов

// context.rotate (-math.pi/2);

// context.fillstyle = "blue";

// context.filltext («Я здесь !!!», -400,30);

// поворачивать 90 градусов

context.rotate (math.pi/2);

context.fillstyle = "Blue";

context.filltext («Я здесь !!!», 350, -420);

console.log (math.sin (math.pi/2));

// rotae 90 градусов и нарисовать 10 линий

context.fillstyle = "green";

для (var i = 0; i <4; i ++) {

var x = (i+1)*20;

var y = (i+1)*60;

var newx = y;

var newy = -x;

context.fillrect (Newx, Newy, 200, 6);

}

}

Функция saveandrestorecontext (context) {

context.save ();

Context.translate (200 200);

context.rotate (math.pi/2);

context.fillstyle = "черный";

context.filltext («2D контекст вращается и переводит», 10, 10);

context.restore ();

context.filltext («2D контекст вращается и переводит», 10, 10);

}