Подробный учебник HTML5 Canvas. 1

<Canvas> является совершенно новым элементом в HTML5, который можно использовать JavaScript для рисования графики. Во -первых, <Canvas> был введен на приборной панели Apple Mac OS X, которая была применена к Safari, а затем на основе браузера Gecko1.8, который также поддерживает этот новый элемент, такой как браузер Firefox. Сегодня элемент <canvas> является частью стандартной спецификации HTML5.

Мы объясним, что <Canvas> может сделать, с помощью этого урока, и его можно использовать в качестве отправной точки для вашего приложения <Canvas>. Обучение <Canvas> элементы не сложно. Вам нужно иметь только базовые знания HTML и JavaScript, а также браузер Firefox, последнюю версию Safari или Opera9+, чтобы вы могли видеть все примеры эффектов.

Теперь давайте начнем с того, как определить элемент <canvas>.

<canvas id = ширина учебника = 150 высота = 150> </canvas>

Элемент <Canvas> имеет только два атрибута: ширина и высота, которые являются необязательными и могут контролироваться с помощью DOM или CSS. Если ширина и высота не установлены, ширина по умолчанию составляет 300 пикселей и используется высотой 150 пикселей. Хотя размер <Canvas> можно контролировать и отрегулировать через CSS, отображаемое изображение будет масштабирован для адаптации к макету. После того, как результаты рендеринга выглядят деформированными, вам не нужно полагаться на CSS. Вы можете указать значения ширины и высоты, отображаемых в <Canvas>. Также как стандартные теги HTML, также могут быть определены атрибуты ID, что может сделать приложение сценария более удобным. Элемент <Canvas> может указать свой стиль (поля, границы, фон и т. Д.) как обычная картина. Тем не менее, эти стили не оказывают никакого влияния на фактическое изображение, сгенерированное Canvas.

Поскольку этот элемент является относительно новым, не все браузеры поддерживают его, поэтому мы должны предоставить альтернативную информацию о дисплее для тех, кто не может просматривать нормально. Он может использовать текст или картинки:

 <canvasid = stockgraphWidth = 150Height = 150>
 Ваш браузер не поддерживает элемент <canvas>.
 </canvas>
 <canvasid = clockwidth = 150Height = 150>
 <imgsrc = images.pngwidth = 150Height = 150alt = заменить изображение/
 </canvas>

В Apple Safari реализация <Canvas> очень похожа на <img>, и у нее нет конечного тега. Однако для того, чтобы <Canvas> широко применим в веб -мире, необходимо предоставить альтернативный контент с местом для остановки, поэтому необходимо положить конец тегу (</canvas>) в реализации Mozilla. <canvas id = foo ...> </canvas> полностью совместим с Safari и Mozilla - Safari просто игнорирует конечную метку. Если есть альтернативный контент, вы можете использовать некоторые трюки CSS, чтобы скрыть альтернативный контент для и только для Safari, потому что этот альтернативный контент должен отображаться в IE, но не в Safari.

<Canvas> создает экран чертежа с фиксированным размером с одним или несколькими контекстами рендеринга, которые могут управлять тем, что отображать. Мы сосредоточены на 2D -рендеринге, который также является единственным вариантом в настоящее время. Мы можем добавить 3D -рендеринг на основе OpenGL ES в будущем.

 varcanvas = document.getElementById ('Tutorial');
 varctx = canvas.getContext ('2d');

Давайте объясним приведенный выше код. Инициализация <Canvas> пустая. Чтобы нарисовать сценарий, вам нужно сначала представить контекст. Это может быть получено с помощью метода GetContext объекта Canvas Element. В то же время также получаются некоторые функции, которые необходимо вызвать для рисования. getContext () принимает значение, которое описывает его тип как аргумент. Первая строка выше получает узел DOM объекта Canvas через метод GetElementByID. Затем используйте его метод getContext, чтобы получить контекст операции на рисунке. Кроме того, мы также можем использовать сценарии для определения поддержки браузера <Canvas>, то есть, чтобы определить, существует ли GetContext.

 varcanvas = document.getElementById ('Tutorial');
 if (canvas.getContext) {
 varctx = canvas.getContext ('2d');
 // рисунок
 }еще{
 // canvas-unsupportedcodehere
 }

Мы начинаем с самого простого шаблона ниже, вы можете скопировать их в локальную резервную копию.

 <html>
 <голова>
 <название> Canvastututorial </title>
 <scripttype = text/javascript>
 functionDraw () {
 varcanvas = document.getElementById ('Tutorial');
 if (canvas.getContext) {
 varctx = canvas.getContext ('2d');
 }
 }
 </script>
 <styletype = text/css>
 Canvas {border: 1pxsolidblack;}
 </style>
 </head>
 <bodyonload = draw ();>
 <canvasid = turningwidth = 150Height = 150> </canvas>
 </body>
 </html>

Осторожно вы найдете функцию, называемую Draw, которая будет выполнена один раз после загрузки страницы (установив свойство Onload тега тега), и, конечно, ее также можно вызвать в SetTimeout, SetInterval или других функциях обработки событий.

Для начала давайте посмотрим на простой взгляд - нарисуем две интерпинированные прямоугольники, один из которых имеет альфа -прозрачный эффект. Мы дадим вам подробный взгляд на то, как это работает в следующем примере.

 <html>
 <голова>
 <scripttype = application/x-javascript>
 functionDraw () {
 varcanvas = document.getElementById (Canvas);
 if (canvas.getContext) {
 varctx = canvas.getContext (2d);
 ctx.fillstyle = rgb (200,0,0);
 ctx.fillrect (10,10,55,50);
 ctx.fillstyle = rgba (0,0,200,0,5);
 ctx.fillrect (30,30,55,50);
 }
 }
 </script>
 </head>
 <bodyonload = draw ();>
 <canvasid = canvaswidth = 150Height = 150> </canvas>
 </body>
 </html>

Вы можете скопировать приведенный выше код в файл HTML для запуска, рендеринги: