Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 6.0+ | 9.6+ | 3.1+ | 4.0+ | 2.1+ | 3.0+ |
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
<canvas id="идентификатор"> </canvas>
Также для этого тега доступны универсальные атрибуты и события.
Обязателен.
Пример
<!DOCTYPE html> <html> <head> <title>canvas</title> <meta charset="utf-8"> <script> window.onload = function() { var drawingCanvas = document.getElementById('smile'); if(drawingCanvas && drawingCanvas.getContext) { var context = drawingCanvas.getContext('2d'); // Рисуем окружность context.strokeStyle = "#000"; context.fillStyle = "#fc0"; context.beginPath(); context.arc(100,100,50,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); // Рисуем левый глаз context.fillStyle = "#fff"; context.beginPath(); context.arc(84,90,8,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); // Рисуем правый глаз context.beginPath(); context.arc(116,90,8,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); // Рисуем рот context.beginPath(); context.moveTo(70,115); context.quadraticCurveTo(100,130,130,115); context.quadraticCurveTo(100,150,70,115); context.closePath(); context.stroke(); context.fill(); } } </script> </head> <body> <canvas id="smile" width="200" height="200"> <p>Ваш браузер не поддерживает рисование.</p> </canvas> </body> </html>
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Вывод рисунка с помощью тега <canvas>
Сайт