注意:本文属于《html5 Canvas绘制图形入门详解》系列文章中的一部分。如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。

在html5中,除了利用canvas绘制矢量图形之外,我们还可以在canvas「画布」上绘制现有的图像文件。

首先,我们来看看使用canvas绘制图像文件需要用到CanvasRenderingContext2D对象的哪些主要属性和方法:

drawImage(mixed image, int x, int y)
以canvas上指定的坐标点开始,按照图像的原始尺寸大小绘制整个图像。这里的image可以是Image对象,也可以是Canvas对象(下同)。
drawImage(mixed image, int x, int y, int width, int height)
以canvas上指定的坐标点开始,以指定的大小(widthheight)绘制整个图像,图像将根据指定的尺寸自动进行相应的缩放。
drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
将指定图像的局部图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、高度为canvasHeight的矩形区域中

是的,你没有看错。要在canvas中绘制图像,我们可以使用一个名为drawImage()的方法,不过该方法具有三种不同的变体,每个方法变体允许接收的参数不仅数量不同,连参数的含义也不尽相同。

在这里,我们对上述三个变体分别举例说明。

首先,我们使用drawImage()的第一个变体在canvas上绘制Google的logo图片(原始尺寸为550 x 190)。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制图像入门示例</title>
</head>
<body> <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas> <script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d"); //创建新的图片对象
var img = new Image();
//指定图片的URL
img.src = "http://www.365mini.com/image/google_logo.png";
//浏览器加载图片完毕后再绘制图片
img.onload = function(){
//以Canvas画布上的坐标(10,10)为起始点,绘制图像
ctx.drawImage(img, 10, 10);
};
}
</script>
</body>
</html>

对应的显示效果如下:

 使用canvas绘制Google的logo图像

由于Google的Logo图像过大,超过了canvas的尺寸范围,因此只能显示出图像的一部分。此时,我们使用第2个变体将Google的logo图像缩小到指定的宽度和高度,并绘制到canvas中

 <script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d"); //创建新的图片对象
var img = new Image();
//指定图片的URL
img.src = "http://www.365mini.com/image/google_logo.png";
//浏览器加载图片完毕后再绘制图片
img.onload = function(){
//以Canvas画布上的坐标(10,10)为起始点,绘制图像
//图像的宽度和高度分别缩放到350px和100px
ctx.drawImage(img, 10, 10, 350, 100);
};
}
</script>

我们将Google的logo图像进行缩放后,此时就可以在canvas中看到整个图像了

canvas-draw-image-2.png

最后,我们使用第三个方法变体将Google logo中的"Goo"部分图像绘制到canvas中("Goo"部分的图像大小可以使用Photoshop等工具测量得出,这里直接使用测量后的结果)。

 <script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d"); //创建新的图片对象
var img = new Image();
//指定图片的URL
img.src = "http://www.365mini.com/image/google_logo.png";
//浏览器加载图片完毕后再绘制图片
img.onload = function(){
/*
* 将图像左侧的"Goo"部分(即以坐标(0,0)为左上角坐标、宽度为332px、高度为190px的部分图像)
* 绘制到canvas中以坐标(10,10)为左上角、宽度为332px、高度为190px的矩形区域
*
* canvas绘制图像的目标区域的宽度和高度与截取的部分图像尺寸保持一致,
* 就表示不进行缩放,以原始尺寸截取部分图像
*/
ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);
};
}
</script>

此时,我们就可以看到canvas中显示的"Goo"局部图像了:

使用canvas绘制Google logo的

使用html5 canvas绘制图片的更多相关文章

  1. HTML5 Canvas 绘制图片不显示的问题

    问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...

  2. HTML5 canvas绘制图片

    demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANV ...

  3. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  4. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  5. html5 canvas绘制环形进度条,环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  6. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  9. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

随机推荐

  1. linux下安装使用libuuid(uuid-generate)

    linux下安装使用libuuid(uuid-generate) linux下安装使用libuuid(uuid-generate) UUID简介 安装libuuid库 编写一个程序试一下 代码 编译运 ...

  2. win8_64下安装paramiko

    win8_64下安装paramiko C:\Python35\Scripts>easy_install paramiko 提示 C:\Python35\Scripts>python Pyt ...

  3. Java验证码识别解决方案

    建库,去重,切割,识别. package edu.fzu.ir.test; import java.awt.Color; import java.awt.image.BufferedImage; im ...

  4. 4.6---找二叉树中序后继(CC150)

    因为,没有重复值,所以只需要做一个标记就OK了. public class Successor { static boolean flag = false; static int result = 0 ...

  5. IP转换成LONG 的 问题

    如何将四个字段以点分开的IP网络址协议地址转换成整数呢?PHP里有这么一个函数ip2long.比如 <?php echo ip2long("10.2.1.3"); ?> ...

  6. DOS与批处理

    cmd命令不区分大小写 d: cd .. cd 文件夹 dir dir 文件或文件夹 可执行文件(.exe, .bat., .com),只需进入文件当前目录并输入文件名(不需要后缀)即可执行, 如果将 ...

  7. jQuery之元素筛选

      1.eq()  筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() ...

  8. poj 2403

    http://poj.org/problem?id=2403 题意:就是给你m个单词,以及n段对话.每一个单词都有所对应的价值.求对话中的价值总和 题解:很简单,就是用单词和价值对应起来,然后再寻找就 ...

  9. 堆栈指针 ---delete 使用

    对拥有堆中一个有效对象的地址的指针进行删除操作的结果,是将这个堆内存的状态从“使用中” 变为“可用”(此时的可用就是指可以调用内存)释放了,可以再次覆盖此处;;     对指针内存进行删除操作后,指针 ...

  10. Unity3D研究院之Prefab里面的Prefab关联问题(转)

    转自http://www.xuanyusong.com/archives/3042 最近在做UI部分中遇到了这样的问题,就是Prefab里面预制了Prefab.可是在Unity里面一旦Prefab预制 ...