Html5 Canvas Image (二)
2012-01-31 17:19
267 查看
上一篇,主要讲了canvas提供的基本的Image API;
本篇我们使用canvas提供的Image Api及变换,来实现一些实例:小车的简单运动、简单游戏地图、图像的平移缩放;
以下应用中使用到的图片:
本篇我们使用canvas提供的Image Api及变换,来实现一些实例:小车的简单运动、简单游戏地图、图像的平移缩放;
以下应用中使用到的图片:
图片1:tanks--[32*32]*8--tanks.png | 图片2:map--[32*32]*4--map.png |
图像的平移缩放<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Pan</title> <script type="text/javascript" src="../script/modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var panImg = new Image(); panImg.addEventListener('load', eventPhotoLoaded, false); panImg.src = "pan.jpg"; var windowWidth = 500; var windowHeight = 500; var windowX = 0; var windowY = 0; var currentScale = 1; var minScale = .2 var maxScale = 3; var scaleIncrement = 0.1; function eventPhotoLoaded() { startUp(); } function drawScreen() { context.fillStyle = "#ffffff"; context.fillRect(0, 0, 500, 500); context.drawImage(panImg, windowX, windowY, windowWidth, windowHeight, 0, 0, windowWidth * currentScale, windowHeight * currentScale); } function startUp() { setInterval(drawScreen, 100); } document.onkeydown = function(e) { e = e ? e : window.event; switch (e.keyCode) { case 38: //up windowY -= 10; if(windowY < 0) { windowY = 0; } break; case 40: //down windowY += 10; if(windowY > photo.height - windowHeight) { windowY = photo.height - windowHeight; } break; case 37: //left windowX -= 10; if(windowX < 0) { windowX = 0; } break; case 39: //right windowX += 10; if(windowX > photo.width - windowWidth) { windowX = photo.width - windowWidth; } break; case 109: //- currentScale -= scaleIncrement; if(currentScale < minScale) { currentScale = minScale; } break; case 107: //+ currentScale += scaleIncrement; if(currentScale > maxScale) { currentScale = maxScale; } } } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px; padding:5px solid #000000"> <canvas id="canvasOne" width="500" height="500"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html> 该代码中,有一个图片"pan.jpg",大家随便找一个比较大的图就可以; 快运行,看看效果吧! 分享:花有重开日,人无再少年,休道黄金贵,安乐最值钱; 祝大家龙年吉祥!!! 相关文章推荐
|