html5-2 canvas平添图片
日期：2014-05-17 浏览次数：20573 次
html5-2 canvas添加图片
加载两张图片到canvas里面。
![]()
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>My first Game</title>
<style type="text/css">
body {
border:none 0px;
margin:0px;
padding:10px;
font-size : 16px;
background-color : #f3f3f3;
}
canvas {
border : 1px solid blue;
}
</style>
<script type="text/javascript">
//一个简单的图片加载函数, callback为当所有图片加载完毕后的回调函数.
function loadImage(srcList,callback){
var imgs={};
var totalCount=srcList.length;
var loadedCount=0;
for (var i=0;i<totalCount;i++){
var img=srcList[i];
var image=imgs[img.id]=new Image();
image.src=img.url;
image.onload=function(event){
loadedCount++;
}
}
if (typeof callback=="function"){
var Me=this;
function check(){
if (loadedCount >= totalCount){
callback.apply(Me,arguments);
}
else{
setTimeout(check,100);
}
}
check();
}
return imgs;
}
var ImgCache=null;
var canvas=null;
var context=null;
function init(){
// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
canvas=document.createElement("canvas");
canvas.width=600;
canvas.height=400;
document.body.appendChild(canvas);
// 取得2d绘图上下文
context= canvas.getContext("2d");
//将加载的所有图片存入ImgCache, 图片加载完成后, 调用startDemo
var imgs = [
{ id : "player",url : "../res/player.png"},
{ id : "bg",url : "../res/bg.png"}
];
ImgCache=loadImage(imgs,startDemo );
}
function startDemo(){
// 绘制背景
var dx=0, dy=0 ;
context.drawImage(ImgCache["bg"],dx,dy);
//绘制站在地上的player, 坐标为200,284
var sx=0, sy=60, sw=50, sh=60;
var dx=400, dy=284, dw=50, dh=60;
context.drawImage(ImgCache["player"], sx, sy, sw, sh, dx, dy, dw, dh );
// 第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。
// sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。
// dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；
}
</script>
</head>
<body onload="init()">
</body>
</html>
加载两张图片到canvas里面。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
