Html5 Canvas Image的图文代码详解(二) -H5教程-PHP中文网

首页

web前端

H5教程

Html5 Canvas Image的图文代码详解(二)

黄舟

Mar 28, 2017 pm 03:45 PM

上一篇，主要讲了canvas提供的基本的Image API；

本篇我们使用canvas提供的Image Api及变换，来实现一些实例：小车的简单运动、简单游戏地图、图像的平移缩放；

以下应用中使用到的图片：

图片1：tanks--[3232]8--tanks.png	图片2：map--[3232]4--map.png

我们在Canvas上(50,50)的位置上显示tanks的前1/8部分(第一个tank)，如何做呢？我们用part of image api;

context.drawImage(tanks,0,0,32,32,50,50,32,32);

如果要使当前的tank旋转90度如何实现呢？

Canvas中旋转操作不管是针对shape、text还是image都是一样的；

首先，要把canvas的current state压入堆栈：context.save();

然后启动变换：context.setTransform(1,0,0,1,0,0);

我们要以tank自身为中心旋转90度，所以，要把原点平移到tank的中心；

tank的位置(x,y)是(50,50),大小size(w,h)是(32,32);所以它的中心点为(x+w/2,y+h/2);

平移原点：context.translate(50 + 16, 50 + 16);

旋转：context.rotate(90*Math.PI/180);

且记：本来是要在canvas的(50,50)位置绘制图片，平移原点后，该位置坐标就变成(-16,-16);

绘制图片：context.drawImage(tanks, 0, 0, 32, 32, -16, -16, 32, 32);

图片旋转---完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Images</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 tanks = new Image();
tanks.addEventListener(&#39;load&#39;, eventLoaded, false);
tanks.src = "tanks.png";
var x = 50;
var y = 50;

function eventLoaded() {
drawScreen();
}

function drawScreen() {
context.fillStyle = "#aaaaaa";
context.fillRect(0, 0, 500, 500);
context.save();
context.setTransform(1, 0, 0, 1, 0, 0)
context.translate(x + 16, y + 16);
var angleInRadians = 90 * Math.PI / 180;
context.rotate(angleInRadians);
context.drawImage(tanks, 0, 0, 32, 32, -16, -16, 32, 32);
context.restore();
}

}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

轮子转动动画

tanks一共有8个tank，每个图大小为(32,32);

如果我们要在(50,50)的位置上显示第2个tank，如果做呢？

第2个：context.drawImage(tanks, 32*(2-1), 0, 32, 32, -16, -16, 32, 32);

第3个：context.drawImage(tanks, 32*(3-1), 0, 32, 32, -16, -16, 32, 32);

依次类推，第8个：context.drawImage(tanks, 32*(8-1), 0, 32, 32, -16, -16, 32, 32);

每个tank图片的不同之处，就在于其轮子部位，如果我们用定时器100ms来轮流显示这1到8个tank图片，就会看到一个tank轮子转动动画；

tank轮子转动动画--完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Images</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 tanks = new Image();
tanks.addEventListener(&#39;load&#39;, eventLoaded, false);
tanks.src = "tanks.png";
//控制取第几个tank
var animationFrames = [0,1,2,3,4,5,6,7];
var frameIndex = 0;//当前动画帧
//tank的显示位置
var x = 50;
var y = 50;

function eventLoaded() {
startUp();
}

function drawScreen() {
context.fillStyle = "#aaaaaa";
context.fillRect(0, 0, 500, 500);
context.save();
context.setTransform(1, 0, 0, 1, 0, 0)
context.translate(x + 16, y + 16);
var angleInRadians = 90 * Math.PI / 180;
context.rotate(angleInRadians);
var sourceX = animationFrames[frameIndex] * 32;//每次取图片的X位置
context.drawImage(tanks, sourceX, 0, 32, 32, -16, -16, 32, 32);
context.restore();
frameIndex++;
//循环动画控制
if(frameIndex == animationFrames.length) {
frameIndex = 0;
}
}

//计时器
function startUp() {
setInterval(drawScreen, 100);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

tank的水平移动效果实现起来就易如反掌啦，只要每次改变每一帧动画中，tank图片的显示的x位置就ok；

fcuntion drawScreen(){x=x+1;…………} 大家运行，看看效果！！！

我们定义一个320*320大小的Canvas，用图片map来绘制一个简单的游戏地图；

图片map共有四副小图，均是32*32：主背景、障碍、顶部底部砖块、左边右边砖块；

首先，我们把Canvas划分成10*10的小格子，每一个小格子的大小分别是32*32，刚好跟图片大小相同；

然后我们来定义一个二维数组来存放每一个小格子所要显示的图片的索引；

再用一个二层循环绘制图片，地图出来了；

先看看效果图：

简单的游戏地图--完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Images</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 tileSheet = new Image();

tileSheet.addEventListener(&#39;load&#39;, eventLoaded, false);
tileSheet.src = "map.png";
var mapRows = 10;
var mapCols = 10;
var Map = [
[3, 2, 2, 2, 0, 2, 2, 2, 2, 3], 
[0,0,0,0,0,0,0,0,0, 0], 
[3,0, 1,0, 1,0, 1,0,0, 3], 
[3, 1,0,0, 1,0,0, 1,0, 3], 
[3,0,0,0, 1, 1,0, 1,0, 3], 
[3,0,0, 1,0,0,0, 1,0, 3], 
[3,0,0,0,0,0,0, 1,0, 3], 
[0,0, 1,0, 1,0, 1,0,0, 0], 
[3,0,0,0,0,0,0,0,0, 3], 
[3, 2, 2, 2,0, 2, 2, 2, 2, 3]
];
function eventLoaded() {
drawScreen()
}

function drawScreen() {
for(var rowCtr = 0; rowCtr < mapRows; rowCtr++) {
for(var colCtr = 0; colCtr < mapCols; colCtr++) {
var cur = Map[rowCtr][colCtr];
var sourceX = cur * 32;
context.drawImage(tileSheet, sourceX, 0, 32, 32, colCtr * 32, rowCtr * 32, 32, 32);
}
}
}

}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="320" height="320">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

再分享一个Image Api的应用：

图像的平移缩放

<!DOCTYPE html>
<html>
<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(&#39;load&#39;, 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"，大家随便找一个比较大的图就可以；

快运行，看看效果吧！

以上是Html5 Canvas Image的图文代码详解(二) 的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee