Html5 Canvas 이미지의 그래픽 코드에 대한 자세한 설명(2)-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

Html5 Canvas 이미지의 그래픽 코드에 대한 자세한 설명(2)

黄舟

Mar 28, 2017 pm 03:45 PM

이전 글에서는 canvas에서 제공하는 기본 이미지 API를 주로 다루었습니다.

이 글에서는 Canvas를 사용합니다. 몇 가지 예를 구현하기 위한 이미지 API 및 변환 제공: 간단한 자동차 이동, 간단한 게임 지도 , 이미지 번역 및 확대/축소

그림:

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

사진 1: 탱크- -[32 *32]*8--tanks.png

그림 2: 지도--[32*32]*4--map.png

Canvas에서의 당사 위치(50,50) 방법 탱크의 처음 1/8 부분(첫 번째 탱크)을 표시하시겠습니까? 이미지 API의 일부를 사용합니다.

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

로그인 후 복사

현재 탱크를 90도 회전하는 방법은 무엇입니까?

캔버스의 회전 작업은 모양, 텍스트, 이미지 모두 동일합니다.

모두 캔버스의 현재 상태를 스택에 푸시해야 합니다: context.save();

그런 다음 변환을 시작합니다: context.setTransform(1, 0,0,1,0 ,0);

탱크 자체를 중심으로 90도 회전하려고 하므로 원점을 탱크 중심으로 변환해야 합니다. ;

탱크의 위치(x, y)는 (50, 50)이고 크기(w, h)는 (32, 32)이므로 중심점은 다음과 같습니다. (x+w/2, y+h/2);

번역 출처: context.translate(50 + 16, 50 + 16);

회전: context.rotate(90*Math.PI /180);

참고: 원래 그림은 (50,50) 위치에 그려질 예정이었습니다. 원점이 변환된 후 위치 좌표는 (-16,-16 );

이미지 그리기: context.drawImage(tanks, 0, 0, 32, 32 , -16, -16, 32, 32);

아아앙

바퀴 회전 애니메이션

탱크 총 8개의 탱크가 있고 각 이미지의 크기는 (32,32)입니다.

두 번째 탱크를 (50) 위치에 표시하려면 어떻게 해야 할까요? ,50)?

두 번째: context.drawImage(tanks, 32*(2-1), 0, 32, 32, -16, -16, 32, 32);

세 번째: 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);

각 탱크 그림의 차이점은 바퀴 부분에 있습니다. 타이머 100ms를 사용하여 1~8개의 탱크 그림을 차례로 표시하면 탱크 바퀴 회전 애니메이션이 표시됩니다.

图片旋转---完整代码
 
<!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>

로그인 후 복사

탱크의 수평 이동 효과는 구현하기 쉽습니다. 애니메이션의 각 프레임을 매번 변경하면 됩니다. 디스플레이의 X 위치는 TANK 사진은 괜찮습니다.

FCUNTION DRAWSCREEN () {x = x+1 ...... ! !

320*320 크기의 캔버스를 정의하고 이미지 맵을 사용하여 간단한 게임 맵을 그립니다. 🎜>그림 지도에는 4개의 작은 그림이 있으며 모두 32*32입니다. 주요 배경, 장애물, 위쪽 및 아래쪽 벽돌, 왼쪽 및 오른쪽 벽돌; 모두, 캔버스를 10*10개의 작은 그리드로 나누고 각 작은 그리드의 크기는 32*32로 그림과 정확히 같은 크기입니다.

그런 다음 정의합니다. a 2차원 배열 은 각 작은 그리드에 표시할 이미지의 인덱스를 저장하는 데 사용됩니다.

그런 다음 2계층 루프를 사용합니다. 이미지를 그리면 지도가 나옵니다.

먼저 렌더링을 보세요:

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>

로그인 후 복사

다른 Image Api 애플리케이션 공유:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

图像的平移缩放
 
<!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>