zoukankan html css js c++ java

Html5Canvas示例

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

前期准备

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

html标签

　　因为示例比较简单所以html里主要就包括了一个<canvas>标签，为了使用方便我还引用了google 上的 jsapi 来调用jquery.

代码

<html>
<head>
    <title>Canvas示例</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
     
</head>
<body style="100%  ; height:100%">
    <canvas id="canvas"  width="1500" height="800">
    </canvas>

</body>
</html>

JS代码

代码

  <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 oTimer;
            var facing = 4;
            var isRunning = false;

            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;
                    draw(i);
                    i++;
                }, 84);
                
            }



            function setFacing() {
           
            }
            
            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);
                
            }

           
        </script>

首先获取通过ID 获取 canvas 对象（这里不知道为什么使用jquery无法获取），然后重新创建一个图片对象，并在图片加载时绘制canvas。为Canvas绑定鼠标按下、释放和移动的事件处理。在鼠标按下时开始移动，释放时停止。

　　因为是简单的示例没有做任何复杂的算法处理，所以人物行走起来有点奇怪。

代码运行结果（在chrome 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="100% ; height:100%">
<canvas id="canvas" width="1500" height="800">
</canvas>

</body>
</html>

示例

查看全文

相关阅读:
Logistic Regression
如何把日期格式化为指定格式？
JavaScript的自调用函数
 elementui 在原生方法参数里，添加参数
 原生js实现随着滚动条滚动，导航会自动切换的效果
 微信小程序-canvas绘制文字实现自动换行
 visual studio 和 sql server 的激活密钥序列号
 跨多个服务器访问不同数据库的表的方法
 数据库面试中常问的几个问题
 聚集索引和非聚集索引的区别

原文地址：https://www.cnblogs.com/keyindex/p/1911536.html

Html5Canvas示例

前期准备

html标签

代码 <html><head> <title>Canvas示例</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> </head><body style="100% ; height:100%"> <canvas id="canvas" width="1500" height="800"> </canvas></body></html> JS代码

代码运行结果（在chrome 8）

示例

代码

<html>
<head>
<title>Canvas示例</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

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

</body>
</html>

JS代码