Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Izobrazheniya-i-tekst-v-canvas

Изображения и текст в Canvas

Этот урок мы начнём со вставки изображения в Canvas. Вообще в Canvas поддерживают три формата изображений: PNG, JPEG, GIF. Для вставки изображения используется метод drawImage(). Причем этот метод может иметь разные параметры:

Но перед тем как вставить картинку на холст нам понадобиться вставить ссылку на изображение. Для наглядности можно посмотреть на один небольшой пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кубические кривые Безье</title>
</head>
<body>
<style>
canvas{
border:1px solid #a1a4a8; 
-moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius:20px;
padding-top:20px;
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;}
</style>
 <img id="img1" src="../img/RSS/pochta.png"
 style="display:none;">
<canvas id="Mycanvas" width="400" height="300">Обновите 
браузер</canvas> 
<script type="text/javascript">
var img1=document.getElementById("img1");
var img2=new Image();  // Создаём изображение
img2.src = '../img/komp.jpg';
var canvas=document.getElementById("Mycanvas")
var image1=canvas.getContext("2d");
image1.drawImage(img1,110,70);
image1.drawImage(img1,10,10,70,70);
image1.drawImage(img1,0,90,110,70,10,200,100,50);
img2.onload = function() {
image1.drawImage(img2,280,10,90,70);
}
</script> 
</body>
</html>

В результате у меня получились вот такие изображения:

Изображения в canvas

Думаю со вставкой картинки (изображений) у вас не возникнет никаких проблем. Давайте теперь попробуем вставить текст. Для вставки текста нам понадобиться метод fillText(«text»,x,y). Сейчас я покажу ещё один маленький пример и думаю, что вы самостоятельно сможете разобраться с параметрами данного метода. Также к тексту можно добавить немного стиля с помощью свойства Бfont:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кубические кривые Безье</title>
</head>
<body>
<style>
canvas{
border:1px solid #a1a4a8; 
-moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius:20px;
padding-top:20px;
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;}
</style>
<canvas id='M2canvas' width="400" height="300">Обновите 
браузер</canvas>
  <script>    
var canvas = document.getElementById('M2canvas');
var text=canvas.getContext("2d");
text.font='28px Verdana';
text.fillStyle='#82216f';
text.fillText("Вставка текста в Canvas", 20, 100); 
  </script>
</body>
</html>

Должно получиться следующее:

Текст в canvas

Ну вот и подошел к концу ещё один урок про Canvas. Надеюсь вам он понравился. Дальше будет ещё интереснее.



наверх