您的位置：首页 > Web前端 > HTML5

Html5-Canvas示例

2010-12-20 16:41 330 查看

　　Html5下新增的一个重要标签<Canvas>可以让我们进行2D绘图。用js+Canvas做一个简单例子：绘制一个可以在页面上移动的人物——“艾斯蒂尔”。

前期准备

　　这里准备了一张8×8的人物图片，8个方向及8帧，图片是8×8的，在X轴上每一帧时向前走一步，而一帧大小为256×256；Y轴上是面向8个方向。
代码

<html>
<head>
<title>Canvas示例</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery","1.3.2");
google.setOnLoadCallback(function() { $(document).ready(pageLoad); });

var canvas;
var canvasCtx;
var imgSpirit;
var currentX;
var currentY;
var targetX;
var targetY;
var difX;
var difY;
var oTimer;
var facing = 4;
var isRunning = false;
var pathX = [];
var pathY = [];
function pageLoad() {
//canvas = $("#canvas");
canvas = document.getElementById('canvas');
imgSpirit = new Image();
imgSpirit.onload = function() {
if (canvas.getContext) {
canvasCtx = canvas.getContext('2d');
currentX = 100;
currentY = 250;
draw(0);
}
}
imgSpirit.src = "spirit.png";
$("#canvas").mousedown(onStart);
$("#canvas").mouseup(onStop);
$("#canvas").mousemove(onMove);
$("#canvas").css("cursor", "pointer");
}

function onStart(event) {
if (event.button == 0) {
targetX = event.pageX;
targetY = event.pageY;
isRunning = true;
onRunning();

}
}

function onStop() {
isRunning = false;
clearInterval(oTimer);
}

function onMove(event) {
if (isRunning) {
difX = event.pageX - targetX;
difY = event.pageY - targetY;
setFacing();
pathX.push(difX);
pathY.push(difY);
targetX = event.pageX;
targetY = event.pageY;

}
}

function onRunning() {
var i = 0;
oTimer = setInterval(function() {
i = i % 8;
setNext();
draw(i);
i++;
}, 84);

}

function setFacing() {
var  y = -(targetY -(currentY +128+60))
var x = targetX - (currentX + 128);
var v=y/x;
var t = Math.atan(v);
var r = Math.PI / 8;

if (y > 0 && x > 0) {
if (t >= 0 && t <= r) {
facing = 4;
}
if (t > r && t < 3 * r) {
facing = 3;
}
if (t > 3 * r) {
facing =2
}

}

if (y > 0 && x < 0) {
if ((-t) > 3 * r) {
facing = 2;
}
if (-t > r && -t < 3 * r) {
facing = 1;
}
if (-t >= 0 && -t <= r) {
facing = 0;
}
}

if (y < 0 && x < 0) {
if (t >= 0 && t <= r) {
facing = 0;
}
if (t > r && t < 3 * r) {
facing = 7;
}
if (t > 3 * r) {
facing = 6
}
}

if (y < 0 && x > 0) {
if ((-t) > 3 * r) {
facing = 6;
}
if (-t > r && -t < 3 * r) {
facing = 5;
}
if (-t >= 0 && -t <= r) {
facing = 4;
}
}
}

function draw(frame) {

if ((currentX +256) >= 1500) {
currentX = 1500 - 256;
}
if (currentX <= 0) {
currentX = 0;
}

if (currentY <= 0) {
currentY = 0;
}
if ((currentY + 256) >= 800) {
currentY = 800 - 256;
}

canvasCtx.clearRect(currentX, currentY, 256, 256);
canvasCtx.drawImage(imgSpirit, frame * 256, facing * 256, 256, 256, currentX, currentY, 256, 256);

}

function setNext() {
if ((currentX + 128) > targetX) {
if (((currentX + 128) - targetX) > 8) {
currentX = currentX - 8;
}
}
if (currentX < targetX) {
if (targetX -currentX ) {
currentX = currentX + 8;
}
}

if ((currentY + 128 + 60) > targetY) {
if (((currentY + 128 + 60) - targetY) > 8) {
currentY = currentY - 6;
}

}
if ((currentY + 128 + 60) < targetY) {
if ((targetY - (currentY + 128 + 60)) > 8) {
currentY = currentY + 6;
}
}
}

</script>
</head>
<body style="width:100%  ; height:100%">
<canvas id="canvas"  width="1500" height="800">
</canvas>

</body>
</html>

[/b]

示例

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航