★ Рубрика: Кодинг

Копируем и рисуем картинку

Здесь приведен пример, в котором показано, как можно перерисовать на канве заданную картинку. Поиск картинки для перерисовке выполняется по id, а результат выводится на канву. Чтобы увидеть результат копирования картинки посредством рисования на канве, изображения полученного из исходной картинки - нажмите кнопку.

<!DOCTYPE html>
<html>
<body>
<p>Используем картинку:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Канва для рисования:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает HTML5 canvas.</canvas>
<p><button onclick="myCanvas()">Нажми меня</button></p>
<script>
function myCanvas() {
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 var img = document.getElementById("scream");
 ctx.drawImage(img,10,10);
}
</script>
</body>
<⁄html>

Исходная картинка:	Канва для рисования:

Похожие публикации: HTML5, JavaScript

Войти и комментировать [ Вход | Регистрация ]