Картинка
рисуется с поворотом на экране вот так:
Html
Напишем код в файле 1.html :
<html>
<!-- заголовок -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- страница -->
<body>
<!-- HTML canvas -->
<canvas id="canvas1" width='400px' height='300px'></canvas>
<!-- JavaScript функции -->
<script>
// загружаем картинки из файлов
function loadImages(files, callbackAllFilesLoaded)
{
// считаем количество файлов
var countFilesToLoad = 0;
for (var fileId in files)
{
countFilesToLoad++;
}
var images = {};
for (var fileId in files)
{
// создаем пустую картинку
images[fileId] = new Image();
// событие onload
images[fileId].onload = function()
{
// когда все файлы загрузились, вызываем нашу функцию callbackAllFilesLoaded чтобы нарисовать картинку
if ( --countFilesToLoad <= 0 )
{
callbackAllFilesLoaded(images);
}
};
// загружаем картинку
images[fileId].src = files[fileId];
}
}
// рисуем картинку на canvas
function MyDrawImage(context, image, x, y)
{
// рисуем картинку
context.drawImage(image, x, y);
}
// рисуем картинку с поворотом на canvas
function MyDrawRotateImage(context, image, x, y, angleInDegree)
{
context.save();
context.translate(x + image.width/2, y + image.height/2);
context.rotate(angleInDegree * Math.PI / 180.0);
context.scale(1, 1);
context.drawImage(image, -image.width/2, -image.height/2);
context.restore();
}
</script>
<!-- главный код -->
<script>
<!-- файл -->
var files = {
tree : "./tree.jpg"
};
<!-- context для рисования -->
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
<!-- загружаем картинки -->
loadImages(files, function (loadedImages)
{
<!-- рисуем картинку -->
MyDrawImage(context, loadedImages.tree, 180, 54);
<!-- показываем картинку с поворотом -->
MyDrawRotateImage(context, loadedImages.tree, 250, 54, 35 /* поварачиваем на 35 градусов*/);
});
</script>
</body>
</html>
tree.jpg картинка должна находится в той же папке, где и файл
1.html
Ваши Отзывы ... комментарии ...