Комментарий: В HTML5 я думаю, что самое важное-ввести Canvas, чтобы мы могли рисовать различную графику в Интернете, а Canvas-это рисунок на основе пикселей. Canvas - это HTML Node, эквивалентный артборду, мы должны рисовать с JS
В HTML5 я думаю, что самое важное - внедрить Canvas, чтобы мы могли рисовать различную графику в Интернете. Это дает людям ощущение, что в этом отношении немного размыто. В веб-Интернете HTML5 есть также рисунки на основе XML, такие как VML и SVG. Canvas-это рисунок на основе пикселей. Canvas является узлом HTML, эквивалентным артборду, и мы должны нарисовать в JS.следующее:
<canvas id = mycanvas width = 600 height = 300> Ваш браузер не поддерживает определение </canvas>.
Мы можем получить объект Canvas как var c = document.getelementbyid (mycanvas); его метод атрибута JS должен быть указан следующим образом:
1: Нарисуйте визуализированный объект, C.GetContext (2D), получите 2D -объект рисования. Независимо от того, сколько раз мы называем объект, объект будет одним и тем же объектом.
2: Метод рисования:
CLECRRECT (слева, верхняя, ширина, высота) очищает определенную область прямоугольника,
FillRect (слева, вверху, ширина, высота) рисует прямоугольник и заполняет его заполнением.
FillText (текст, x, y) рисует текст;
Strokerect (слева, вверху, ширина, высота) рисует прямоугольник и рисует границу с помощью Strokestyle.
startPath (): включите чертеж пути и сбросьте путь к начальному состоянию;
closePath (): нарисуйте концы пути пути, он проведет закрытый интервал и добавит закрытую кривую из исходной позиции в текущую координату;
Moveto (x, y): установите фактические координаты чертежа.
Lineto (x, y); рисует прямую линию от текущей позиции до x, y.
Fill (), incled (), clip (): последний контур заполнения и границ, который завершен рисунок, область клипа.
ARC (): Нарисуйте дугу, центральное положение, начальное радиан и окончание радиана, чтобы указать положение и размер дуги;
rect (): прямоугольный путь;
DrawMage (Immag): рисуйте картинки;
QuadraticCurveto (): квадратичный путь сплайна, параметр две контрольные точки;
beziercurveto (): bezier curve, три контрольных точка параметров;
CreateImagedata, Getimagedata, Putimagedata: это данные Pixel в холсте. Imagedata - это данные о ширине, высоте и данных, где данные являются записи нашего пигмента как
argb, поэтому длина размера массива составляет ширину*высота*4, а порядок - RGBA соответственно. Getimagedata - это получить прямоугольные пиксели области, а Putimagedata - это установить пиксели прямоугольной области;
… и так далее!
3: координатная трансформация:
Перевести (x, y): перевод, происхождение перемещается в координаты (x, y);
вращение (а): преобразование вращения, угол вращения степени;
шкала (x, y): преобразование масштабирования;
Save (), Restore (): предоставляет и стек, сохранить и восстановить состояние чертежа, сохранять токашковое состояние чертежа в стек, восстанавливает стек и восстанавливает состояние чертежа;
… и так далее!
Хорошо, уже слишком поздно. Прикрепил мой тестовый код:
<html>
<голова>
</head>
<тело>
<canvas> Ваш браузер не поддерживает его </canvas>
<script type = "text/javascript">
Ширина вари, высота, вверху, слева;
ширина = высота = 100;
Верх = слева = 5;
var x = 10;
var y = 10;
var c = document.getElementbyId ("myCanvas");
var maxwidth = c.width-5;
var maxheight = c.height-5;
var cxt = c.getContext ("2d");
cxt.strokestyle = "#00f";
cxt.strokerect (0,0, C.Width, C.Height);
var img = новое изображение ();
img.src = "1.gif";
var myInterval = null;
начинать();
Функция rebresh () {
cxt.clearrect (слева, верхняя, ширина, высота);
if ((слева+x)> (maxwidth-width) || слева+x <0) {
x = -x;
}
if ((top+y)> (maxheight-height) || top+y <0) {
y = -y;
}
слева = слева+x;
top = top+y;
cxt.drawimage (img, слева, верхняя, ширина, высота);
cxt.font = "20pt songyi";
cxt.filltext («Разрушение волка», слева, топ+25);
}
функция start () {
if (myInterval == null) {
MyInterval = setInterval ("refresh ()", 100);
}
}
функция stop () {
if (myInterval! = null) {
ClearInterval (MyInterval);
MyInterval = null;
}
}
Функция inrectangle (x, y, rectx, recty, rwidth, rheight) {
return (x> = rectx && x <= rectx+rwidth) && (y> = recty && y <= recty+rheight)
}
c.onmouseover = function (e) {
if (inrectangle (e.clientx, e.clienty, слева, верх, ширина, высота)) {
останавливаться();
}
c.onmouseout = function (e) {
начинать();
}
c.onmouseMove = function (e) {
if (inrectangle (e.clientx, e.clienty, слева, верх, ширина, высота)) {
if (myInterval! = null) {
останавливаться();
}
}еще{
начинать();
}
}
}
</script>
</body>
</html>