HTML5 画一张图

笔者：本笃庆军

原文地址：http://blog.csdn.net/qingdujun/article/details/33344289

一、绘制图像

使用drawImage()方法绘制图像。
画图环境提供了该方法的三个不同版本号。
drawImage(image,x,y) ：在canvas中(x,y)处绘制图片。
drawImage(image,x,y,width,height) ：在canvas中(x,y)处绘制图片。并将其缩放到指定的宽度和高度。
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ：从图片中分割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)。缩放到指定的宽度和高度。并在canvas中(x,y)绘制出来。

二、<img>标签

绘制图片前，还须要将图片载入到浏览器中。这里我们只在canvas标签后面加入一个<img>标签。

三、绘制图片

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-type" content="text/html; charset = utf-8">

	<title>HTML5</title>

	<script type="text/javascript" charset = "utf-8">

		//这个函数将在页面全然载入后调用

		function pageLoaded()

		{

			//获取canvas对象的引用,注意tCanvas名字必须和以下body里面的id同样

			var canvas = document.getElementById('tCanvas');

			//获取该canvas的2D画图环境

			var context = canvas.getContext('2d');

			//获取图片对象的引用

			var image = document.getElementById('tkjpg');

			//在(0,50)处绘制图片

			context.drawImage(image,0,50);

			//缩小图片至原来的一半大小

			context.drawImage(image,200,50,165/2,86/2);

			//绘制图片的局部(从左上角開始分割0.7的图片)

			context.drawImage(image,0,0,0.7*165,0.7*86,300,70,0.7*165,0.7*86);

		}

	</script>

</head>

<body onload="pageLoaded();">

	<canvas width = "500" height = "200" id = "tCanvas" style = "border:black 1px solid;">

	 	<!--假设浏览器不支持则显演示样例如以下字体-->

		提示：你的浏览器不支持<canvas>标签

	</canvas>

	<img src = "tk.jpg" id = "tkjpg">

</body>

</html>

四、绘制效果

HTML5 画一张图

五、附上原坦克素材

HTML5 画一张图

參考文献：(印)香卡(Shankar,A.R.)(作者).谢光磊(译者).HTML5游戏开发进订购指南[M].北京：电子工业出版社，2013.9-10.

HTML5 画一张图的更多相关文章

一张图看懂 JS 原型链
JS 原型链,画了张图,终于理清楚各种关系有木有写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...
一张图弄懂js原型和原型链
前言 JavaScript的原型和原型链是面试的时候经常被问及到的问题,考察了我们对JavaScript的基础掌握情况,今天我们在这里用一张图来梳理下其中的知识点. 下面我来引入这张非常经典的图,我也 ...
Python中使用&quot&semi;subplot&quot&semi;在一张画布上显示多张图
subplot(arg1, arg2, arg3) arg1: 在垂直方向同时画几张图 arg2: 在水平方向同时画几张图 arg3: 当前命令修改的是第几张图 t = np.arange(0,5,0 ...
一张图帮你记忆，Spring Boot 应用在启动阶段执行代码的几种方式
前言有时候我们需要在应用启动时执行一些代码片段,这些片段可能是仅仅是为了记录 log,也可能是在启动时检查与安装证书 ,诸如上述业务要求我们可能会经常碰到 Spring Boot 提供了至少 5 种 ...
python—networkx：在一张图中画出多个子图
通过plt.subplot能够在一张图中画出多个子图 #coding: utf-8 #!/usr/bin/env python """ Draw a graph with ...
【深入AQS原理】我画了35张图就是为了让你深入 AQS
申明本文首发自公众号:程序员cxuan,此文章为本人投稿文章.已经和cxuan沟通,文章投递公众号,博客平台我自己发布可标记为原创. 此文章肝了很久,图片较多,希望大家喜欢. 另外,感兴趣的小伙伴可 ...
为了拿捏 Redis 数据结构，我画了 40 张图（完整版）
大家好,我是小林. Redis 为什么那么快? 除了它是内存数据库,使得所有的操作都在内存上进行之外,还有一个重要因素,它实现的数据结构,使得我们对数据进行增删查改操作时,Redis 能高效的处理. ...
自画一张linux基础架构学习框架图
草图一张,仅供参考,学习并掌握下面这张图的技能只是个开始--
HTML5利用canvas，把多张图合并成一张图片
需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...

随机推荐

MongoDB 知识要点一览
1.启动mongoDb数据库: 进入mongoDB的安装目录,执行如下命令 C:\Program Files\MongoDB\Server\3.0\bin>mongod.exe --dbpath ...
【HDU 5115】Dire Wolf
题意 n只狼排成一行,每次击败第i只狼需要ai+bi-1+bi+1代价,击败后,相当于出列了,与i相邻两只狼成了相邻的.求击败所有狼的最小总代价. 分析我开始一直以为是个环TAT.. 区间dp,dp ...
javascript设计模式学习之十六——状态模式
一.状态模式的定义状态模式的关键是区分事务内部和外部的状态,事务内部状态改变往往会带来事务的行为改变. 状态模式中有意思的一点是,一般我们谈到封装,都是优先封装对象的行为,而非对象的状态.但在状态模 ...
Ios中比较两个日期之间的时间差距
1.比较两个日期之间的时间差距 // 1.日历对象(标识:时区相关的标识) NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIde ...
css渐变色
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content=& ...
Android开发手记(13) 几种Alertdialog的使用
本文主要讨论七种形式的AlertDialog,及其编写方法. 1.退出在用户退出的时候提示用户是否退出,含有“确定”和“退出”两个按键. btnExit.setOnClickListener(new ...
uva 10626 - Buying Coke(记忆化搜索）
题目链接:10626 - Buying Coke 题目大意:给出要买可乐的数量, 以及1元,5元和10元硬币的数量, 每瓶可乐8元,每次照钱会按照最少硬币的方式找回, 问如何投币可使得投入的硬币数最少 ...
ORA-01157，记一次Oracle故障恢复过程
生产环境中有两台部署PowerCenter的ETL业务机,近期发现无法通过客户端连接到ETL服务. 初步怀疑是PowerCenter挂掉了,或者资料库出现了故障. 登陆设备后发现PowerCenter ...
js实现关键词高亮显示正则匹配
html 和ajax 部分就不写了,只需将需要匹配的文字传进去就可以了比如匹配后台传回的字符串data.content中的关键词:直接调用: data.content = highLightKeyw ...
canves绘制北京地铁线路图，包括线路绘制，优先路线，单路径选择。
canves绘制北京地铁线路图,包括线路绘制,优先路线,单路径选择. 即将推出,后台涵盖各种语言,php,C#,java,nodejs等.