<!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里面。
分享到：
相关推荐
本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果，这是许多网页应用、照片编辑器和游戏中的常见功能。 首先，我们需要理解HTML5 Canvas的基本结构。Canvas是一个基于矢量图形的画布，可以通过JavaScript来...
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
使用HTML2Canvas添加水印的过程分为以下几个步骤： 1. **引入库**：首先，你需要在HTML文件中引入HTML2Canvas库。你可以通过CDN链接或者下载本地库文件来引入。例如： ```html ...
// 将生成的Canvas添加到页面中 }, width: 300, height: 300 }).then(function(canvas) { // 成功截图后的回调函数 console.log(canvas); }); ``` 上述代码段中，首先指定了需要截图的元素（这里是document....
"html5-canvas-web-图片涂鸦"这个主题涉及到的知识点主要集中在如何利用HTML5的Canvas API来实现图片的涂鸦功能。 1. **Canvas API基础** HTML5的Canvas是一个基于矢量图形的画布，通过JavaScript来控制。它提供了...
微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素，提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件，开发者可以...
HTML2Canvas是一个非常实用的JavaScript库，它允许你在浏览器中将HTML内容捕获为Canvas图像，进而可以转换为图片（如JPEG、PNG）或者进行其他Canvas相关的操作。这个"niklasvh-html2canvas.zip"压缩包包含了一份...
- 图片资源的加载会影响html2canvas的渲染效果，确保所有图片已加载完毕再调用html2canvas。 - 考虑到性能，避免对大量或大型元素进行截图操作。 6. **扩展应用**： - 除了基本的截图功能，html2canvas还可以...
4. **Canvas API**：学习如何在Canvas上绘图，包括`canvas.getContext('2d')`获取绘图环境，`drawImage()`绘制图片，`fillText()`添加文字，以及`createLinearGradient()`创建渐变等。 5. **Promise和async/await**...
1. 引入库文件：在HTML头部添加html2canvas的CDN链接或者本地文件引用。 2. 创建实例：通过`new html2canvas()`创建html2canvas实例。 3. 调用方法：使用`.then()`方法指定渲染完成后的回调函数，处理生成的Canvas或...
在"html5 canvas 图片压缩"这个主题中，我们将探讨如何利用Canvas来实现图片的压缩，并解决不同浏览器的兼容性问题，以及在微信等特定环境下图片旋转和压缩的解决方案。 首先，我们要理解Canvas的基本用法。在HTML...
- **图片转换**：使用Node-canvas对图片进行处理，如转换格式、调整尺寸、添加水印等。 - **响应处理**：将处理后的图片以二进制流的形式返回给客户端，或者保存到服务器指定路径。 ### 5. 使用Img-trans的步骤 1....
5. **标记与图层管理**：在地图上添加标记（Marker）或图层（Layer）是常见的需求，Map-Canvas应该提供API来方便地创建、管理这些元素，比如设置标记的位置、样式，或者图层的可见性。 6. **地图瓦片支持**：为了...
2. **图片加载延迟**：如果HTML元素包含未完全加载的图片，HTML2Canvas可能无法正确捕获它们，导致空白或模糊的图像。解决这个问题的方法是在调用html2canvas之前确保所有图片已经加载完毕，可以使用`window.onload`...
HTML5+JS游戏开发是现代网页游戏制作的重要技术组合，Canvas作为HTML5中的一个核心元素，为动态图形和交互式应用程序提供了强大的支持。本模块主要介绍如何利用HTML5的Canvas和JavaScript来创建一个打字游戏的升级版...
在这个例子中，我们对整个body进行截图，并将生成的Canvas添加到页面上，同时也会创建一个指向截图的图片链接。如果你想要自定义截图区域，可以传入更具体的DOM选择器或者DOM元素。 另外，值得注意的是，...
生成的Canvas对象可以进行进一步操作，如调整尺寸、添加水印等，但不能直接保存为图片。这时就需要`canvas2image`库的帮助。 `canvas2image` 是一个轻量级的JavaScript库，它能够将Canvas对象转换为Image对象，从而...
HTML2canvas是一个JavaScript库，它的主要功能是在用户的浏览器上将HTML内容捕获并转换为Canvas图像，进而可以进一步转化为图片格式，如JPEG、PNG或SVG。这个强大的工具为开发者提供了一种无需服务器参与的方式，就...
HTML2canvas是一个JavaScript库，它的主要功能是将网页的某个DOM元素，比如div，渲染成一个canvas元素，然后进一步转换为图片，用户可以下载到本地。这个过程在浏览器端完成，无需服务器支持，因此非常适用于生成...
HTML5的canvas元素是网页开发中的一个强大工具，它提供了在浏览器端动态绘制图形的能力，包括图片处理。在这个示例中，我们将深入探讨如何利用canvas进行图片的裁剪、旋转和缩放操作。 首先，我们需要在HTML文件中...