笔者：本笃庆军

原文地址：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>标签。

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

三、绘制图片

<!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>

四、绘制效果

五、附上原坦克素材

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

版权声明：本文博主原创文章，博客，未经同意不得转载。

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

  1. 一张图看懂 JS 原型链

    JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...

  2. 一张图弄懂js原型和原型链

    前言 JavaScript的原型和原型链是面试的时候经常被问及到的问题,考察了我们对JavaScript的基础掌握情况,今天我们在这里用一张图来梳理下其中的知识点. 下面我来引入这张非常经典的图,我也 ...

  3. Python中使用"subplot"在一张画布上显示多张图

    subplot(arg1, arg2, arg3) arg1: 在垂直方向同时画几张图 arg2: 在水平方向同时画几张图 arg3: 当前命令修改的是第几张图 t = np.arange(0,5,0 ...

  4. 一张图帮你记忆，Spring Boot 应用在启动阶段执行代码的几种方式

    前言 有时候我们需要在应用启动时执行一些代码片段,这些片段可能是仅仅是为了记录 log,也可能是在启动时检查与安装证书 ,诸如上述业务要求我们可能会经常碰到 Spring Boot 提供了至少 5 种 ...

  5. python—networkx：在一张图中画出多个子图

    通过plt.subplot能够在一张图中画出多个子图 #coding: utf-8 #!/usr/bin/env python """ Draw a graph with ...

  6. 【深入AQS原理】我画了35张图就是为了让你深入 AQS

    申明 本文首发自公众号:程序员cxuan,此文章为本人投稿文章.已经和cxuan沟通,文章投递公众号,博客平台我自己发布可标记为原创. 此文章肝了很久,图片较多,希望大家喜欢. 另外,感兴趣的小伙伴可 ...

  7. 为了拿捏 Redis 数据结构，我画了 40 张图（完整版）

    大家好,我是小林. Redis 为什么那么快? 除了它是内存数据库,使得所有的操作都在内存上进行之外,还有一个重要因素,它实现的数据结构,使得我们对数据进行增删查改操作时,Redis 能高效的处理. ...

  8. 自画一张linux基础架构学习框架图

    草图一张,仅供参考,学习并掌握下面这张图的技能只是个开始--

  9. HTML5利用canvas，把多张图合并成一张图片

    需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...

随机推荐

  1. 剖析html对标准标签和自定义标签闭合与不闭合渲染问题

    昨天在修改去年写的系统的时候无意中看到了当时写的一个利用标准标签未闭合在单元格内把整个单元格颜色渲染成红色的效果,如下: 当时的问题是从后台返回来的是个int整数而%是写在页面上的如图 这 时候就出现 ...

  2. Oracle 六闪回技术，flashback

    Flashback 技术基于Undo segment基于内容的, 因此,限制UNDO_RETENTON参数. 要使用flashback 特征,您必须启用自己主动撤销管理表空间. 在Oracle 11g ...

  3. ISAPI_Rewrite不起作用的N种原因

    现在经常用到ISAPI_Rewrite,遇到的问题就是在本地测试的时候,一切没有问题,到服务器上,竟然不起作用.郁闷~经过我的一些探索,发现了比起作用的原因如下:1.IIS_WPG对ISAPI_Rew ...

  4. 开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器

    原文:[原创]开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器                本博客所有文章分类的总目录:http://www.cnblogs.com/asxiny ...

  5. yum 安装时错误 Errno 14 Couldn't resolve host 解决办法(转)

    在安装mlocate的时候发现一直报错,错误内容大致如下 Downloading Packages:http://mirrors.163.com/centos/6.5/os/i386/Packages ...

  6. 会员卡管理系统技术解析（十八）Timer定时监听

    会员卡管理系统技术解析(十八)Timer定时监听 在web应用中,有时候客户须要一些定时程序.不须要客户自己去操作.而是由应用程序自行触发(代理)运行某些操作. 这个时候监听与定时器的配合使用就基本能 ...

  7. AspUpload组件的安装及使用方法介绍

    http://soft.huweishen.com/soft/47.html AspUpload对ASP编程人员来说要实现ASP网站文件上传功能它是首选.本文就为大家介绍一下AspUpload组件的安 ...

  8. OpenGL学习日记-2015.3.13——多实例渲染

        实例化(instancing)或者多实例渲染(instancd rendering)是一种连续运行多条同样渲染命令的方法.而且每一个命令的所产生的渲染结果都会有轻微的差异. 是一种很有效的.有 ...

  9. vmWare虚拟机下ubuntu配置代理上网

    最终用上了linux,windows下用vmWare安装虚拟机,挂ubuntu 14.04,,认为非常不习惯,非常难侍候. 而且遇到的客观困难还不少,这两天着实费了不少功夫.主要是上班这里上网要配置代 ...

  10. linux学习（一个） 在unbuntu通过添加新的用户

    最近安装了双系统,开始折腾unbuntu该.Linux系统是一个多用户操作系统,非常多的人才完整的操作需要管理员权限,完全管理员权限是非常重要的.人谁是刚开始学习,般用户的权限即可了,相对于刚開始学习 ...