Введение в Javascript HTML5 Canvas API
View more Tutorials:
Перед созданием HTML5, когда веб-разработчики хотели использовать графику (graphic) или анимацию (animation) в website необходимо было внедрить продукт третьей стороны (third party), как Flash, Java Applet,.. Хотя это может решить проблему, но website становится тяжелее и что-то вас не устраивает.

Когда HTML5 был запущен, он представил людям многие новые свойства и теги, включая элемент <canvas>. Элемент <canvas> создает прямоугольную область, и вам нужно использовать Javascript чтобы нарисовать на этой области.
Canvas доступен в виде API и поддерживается современными браузерами. Более того, он совместим с несколькими платформами. Таким образом, вы можете создавать приложения один раз и развертывать их на разных платформах - PC (Персональный Компьютер) или мобильных устройствах.
В результате, вы можете создать такую игру только с Javascript:

Браузеры поддерживающие элемент <canvas>:

В данной части я представлю вам некоторые примеры, используя HTML5 Canvas, целью является помочь вам представить то, что вы можете сделать с HTML5 Canvas.
<canvas>
По умолчанию, элемент <canvas> создает прямоугольную область без границ и содержания. Вы можете настроить ширину и высоту для <canvas> используя атрибуты (attribute) width, height. Если атрибуты width, height не будут определены, они будут иметь значение по умолчанию это 300px, 150px.
first-canvas-example.html
<!DOCTYPE html> <html> <head> <title>Canvas</title> <meta charset="UTF-8"> </head> <body> <h1>HTML5 Canvas</h1> <canvas style="border:1px solid black" width=280 height=150> Your browser does not support the HTML5 Canvas. </canvas> </body> </html>

Например, нарисуйте круг на Canvas:
function drawCircle() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); }
Смотрите полный код примера:
draw-circle-example.html
<!DOCTYPE html> <html> <head> <title>Canvas</title> <meta charset="UTF-8"> <script> function drawCircle() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); } </script> </head> <body> <h2>Draw Circle</h2> <button onclick="drawCircle()">Draw Circle</button> <a href="">Reset</a> <br/><br/> <canvas id="myCanvas" style="border:1px solid black" width=280 height=150> Your browser does not support the HTML5 Canvas. </canvas> </body> </html>
HTML 5 Clock
Например используйте Javascript и Canvas чтобы создать Часы (Clock) отображающие текущее время. Это показывает, что Canvas API может создавать анимационные эффекты.
clock.js
function drawClock() { var canvas = document.getElementById('myClock'); if (canvas.getContext) { var c2d = canvas.getContext('2d'); c2d.clearRect(0, 0, 300, 300); //Define gradients for 3D / shadow effect var grad1 = c2d.createLinearGradient(0, 0, 300, 300); grad1.addColorStop(0, "#D83040"); grad1.addColorStop(1, "#801020"); var grad2 = c2d.createLinearGradient(0, 0, 300, 300); grad2.addColorStop(0, "#801020"); grad2.addColorStop(1, "#D83040"); c2d.font = "Bold 20px Arial"; c2d.textBaseline = "middle"; c2d.textAlign = "center"; c2d.lineWidth = 1; c2d.save(); //Outer bezel c2d.strokeStyle = grad1; c2d.lineWidth = 10; c2d.beginPath(); c2d.arc(150, 150, 138, 0, Math.PI * 2, true); c2d.shadowOffsetX = 4; c2d.shadowOffsetY = 4; c2d.shadowColor = "rgba(0,0,0,0.6)"; c2d.shadowBlur = 6; c2d.stroke(); //Inner bezel c2d.restore(); c2d.strokeStyle = grad2; c2d.lineWidth = 10; c2d.beginPath(); c2d.arc(150, 150, 129, 0, Math.PI * 2, true); c2d.stroke(); c2d.strokeStyle = "#222"; c2d.save(); c2d.translate(150, 150); //Markings/Numerals for (i = 1; i <= 60; i++) { ang = Math.PI / 30 * i; sang = Math.sin(ang); cang = Math.cos(ang); //If modulus of divide by 5 is zero then draw an hour marker/numeral if (i % 5 == 0) { c2d.lineWidth = 8; sx = sang * 95; sy = cang * -95; ex = sang * 120; ey = cang * -120; nx = sang * 80; ny = cang * -80; c2d.fillText(i / 5, nx, ny); //Else this is a minute marker } else { c2d.lineWidth = 2; sx = sang * 110; sy = cang * 110; ex = sang * 120; ey = cang * 120; } c2d.beginPath(); c2d.moveTo(sx, sy); c2d.lineTo(ex, ey); c2d.stroke(); } //Fetch the current time var ampm = "AM"; var now = new Date(); var hrs = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); c2d.strokeStyle = "#000"; //Draw AM/PM indicator if (hrs >= 12) ampm = "PM"; c2d.lineWidth = 1; c2d.strokeRect(21, -14, 44, 27); c2d.fillText(ampm, 43, 0); c2d.lineWidth = 6; c2d.save(); //Draw clock pointers but this time rotate the canvas rather than //calculate x/y start/end positions. // //Draw hour hand c2d.rotate(Math.PI / 6 * (hrs + (min / 60) + (sec / 3600))); c2d.beginPath(); c2d.moveTo(0, 10); c2d.lineTo(0, -60); c2d.stroke(); c2d.restore(); c2d.save(); //Draw minute hand c2d.rotate(Math.PI / 30 * (min + (sec / 60))); c2d.beginPath(); c2d.moveTo(0, 20); c2d.lineTo(0, -110); c2d.stroke(); c2d.restore(); c2d.save(); //Draw second hand c2d.rotate(Math.PI / 30 * sec); c2d.strokeStyle = "#E33"; c2d.beginPath(); c2d.moveTo(0, 20); c2d.lineTo(0, -110); c2d.stroke(); c2d.restore(); //Additional restore to go back to state before translate //Alternative would be to simply reverse the original translate c2d.restore(); setTimeout(drawClock, 1000); } }
clock.html
<!DOCTYPE html> <html> <head> <title>Clock</title> <meta charset="UTF-8"> <script src="clock.js"></script> </head> <body onload="drawClock()"> <h1>HTML 5 Clock</h1> <canvas id="myClock" width=320 height=320> Your browser does not support the HTML5 Canvas. </canvas> </body> </html>