`
cxy020
  • 浏览: 63575 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5-1 创建canvas

HTML5游戏 
阅读更多
以前在论坛里面下载了【大城小胖】共享的html5游戏源码。
现在打算一点一点用心的学习下。
顺便在共享下全部源码。

正题。 
<html>
<script type="text/javascript">
function init(){
	
	// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
	var canvas=document.createElement("canvas");
	canvas.width=600;
	canvas.height=400;
	document.body.appendChild(canvas);
		
	// 取得2d绘图上下文 
	var context= canvas.getContext("2d");
	
	// 加载图片,加载后在context上进行绘制. (图片是异步加载,所以在onload事件里进行绘制)
	var image = new Image();
	image.src = "../res/bg.png";
	image.onload=function(event){
		var loadedImg=event.target;
		// 将加载后的图片,绘制在画布坐标[dx,dy]处,也就是图片的左上角坐标为[dx,dy]
		var dx=0, dy=0 ;
		context.drawImage(loadedImg,dx,dy);
	};
}
</script>

</head>
<body onload="init()">
</body>
</html>


分享到：
| js动画
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分

    1. **创建模板**：开发者使用WXML编写包含所需元素的模板，这些元素可以是文字、图片、线条等，就像平常在页面布局中那样。 2. **定义样式**：通过CSS为这些模板元素定义样式，包括颜色、大小、位置等，确保在canvas...

    wxa-comp-canvas-drag-master.zip

    微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素，提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件，开发者可以...

    niklasvh-html2canvas.zip

    1. 引入HTML2Canvas库：在HTML文件中，你需要引入`dist/html2canvas.js`这个脚本。 ```html &lt;script src="dist/html2canvas.js"&gt;&lt;/script&gt; ``` 2. 调用HTML2Canvas：在JavaScript中，你可以通过以下方式调用...

    前端开源库-map-canvas

    1. **Canvas技术**：Canvas是HTML5中的一个重要特性，它允许开发者通过JavaScript动态绘制图形。在Map-Canvas中，开发者可以通过Canvas API来绘制地图的各种元素，如地理坐标、标记、路径等，实现高度定制化的地图...

    微信小程序海报插件，生成海报的小程序组件wxa-plugin-canvas-master.zip

    首先，我们要理解“wxa-plugin-canvas-master”中的“wxa”代表的是微信小程序的编程环境，“plugin”指的是扩展或插件，而“canvas”则是HTML5中的一个重要元素，它允许程序员进行动态图形绘制。在这个组件中，...

    vue ---- 基于canvas的绘制海报组件

    这个组件充分利用了HTML5的Canvas元素，提供了一种灵活的方式来动态生成和定制海报。 Canvas 是HTML5的一个重要特性，它允许通过JavaScript在网页上进行2D和3D图形绘制。在这个组件中，Canvas成为了海报绘制的画布...

    html5-canvas-mouse-ink

    "html5-canvas-mouse-ink"这个项目显然与Canvas有关，特别是涉及到了鼠标交互和动画效果，这通常是用来创建某种动态视觉效果，比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中，`&lt;canvas&gt;`元素是核心，它是画布，而...

    360度全景图-HTML5 Canvas实现/支持chrome/FF/IE9+

    总的来说，这个项目展示了如何使用HTML5 Canvas结合JavaScript技术来创建一个跨浏览器的360度全景图应用，提供了丰富的用户体验，特别是对于那些支持HTML5的现代浏览器。通过深入理解Canvas API和相关的图像处理技术...

    Dynamic-effect-of-canvas-ring-master.zip

    这个“Dynamic-effect-of-canvas-ring-master.zip”项目显然是一个利用Canvas技术创建动态圆环效果的示例。下面我们将深入探讨与Canvas相关的知识点，以及如何利用三角函数和鼠标事件来实现这一效果。 1. **HTML5 ...

    HTML5+JS游戏开发模块----canvas图片拖放

    HTML5+JS游戏开发模块中的图片拖放功能是利用HTML5的新特性，特别是Canvas元素，结合JavaScript编程实现的。Canvas是HTML5中的一个强大的绘图工具，允许开发者在网页上进行动态图形绘制，包括图像的移动、旋转、缩放...

    文字粒子效果html5-canvas-side-文字.rar

    在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中，包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等，可以给用户带来视觉上的冲击力和趣味性。 ...

    HTML5+JS游戏开发模块----canvas打字游戏升级版

    1. **HTML5 Canvas**: HTML5的Canvas是一个二维绘图API，允许开发者在网页上进行动态图形绘制。通过JavaScript，我们可以控制Canvas上的每一像素，实现丰富的动画效果和游戏场景。在打字游戏中，Canvas可以用来绘制...

    Html5-Canvas 贪吃蛇

    1. **HTML5 Canvas基本概念**： - Canvas是一块可绘图的区域，通过`&lt;canvas&gt;`标签在HTML文档中声明。 - JavaScript可以访问到Canvas元素，并通过其`getContext()`方法获取2D渲染上下文，用于绘制。 - 2D渲染上...

    前端项目-javascript-canvas-to-blob.zip

    这个“前端项目-javascript-canvas-to-blob.zip”包含了一个示例项目，帮助开发者理解并应用这一功能。 该项目的核心在于`canvas.toBlob()`方法。这个方法接收一个回调函数作为参数，当转换完成时，会将生成的Blob...

    ec-canvas动态加载

    EC-Canvas是阿里云ECharts团队推出的一种专为移动端设计的绘图库，它基于HTML5的Canvas元素，用于在移动设备上展示丰富的数据可视化效果。EC-Canvas动态加载是其核心特性之一，允许开发者在运行时根据需要加载图表，...

    html5-canvas-loader.rar

    这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们深入探讨HTML5 Canvas以及如何使用它来创建加载器。 HTML5 Canvas是一个基于矢量图形的画布元素，通过JavaScript ...

    Html5-canvas之图片添加马赛克

    在现代Web开发中，HTML5的Canvas API是一个强大的工具，它允许开发者在浏览器端进行动态图形绘制和处理。本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果，这是许多网页应用、照片编辑器和游戏中的常见功能...

    商品展示 360度全景图-HTML5 Canvas 实现

    本项目基于HTML5的Canvas技术，实现了商品的360度全方位展示，适用于Chrome、Firefox以及IE9及以上的浏览器。 HTML5是现代网页开发的标准，它引入了许多新的API和元素，Canvas就是其中之一。Canvas是一个二维绘图上...

Magicbox
Global site tag (gtag.js) - Google Analytics