Комментарий: HTML5 Canvas предоставляет графический API, который может быть реализован, с помощью которого вы можете просто реализовать перевод, вращение, масштабирование и т. Д. Позвольте мне поделиться с вами конкретной реализацией перевода, вращения, масштабирования и эталонных изображений. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для вас.
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);
}