HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 HTML5教程 查看内容

HTML Canvas绘图使用详解

2012-5-16 15:16| 发布者: html5cn| 查看: 18623| 评论: 9

摘要: canvas是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些canvas的应用示例,我们将会在此教程中 ...
<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些<canvas>的应用示例,我们将会在此教程中看到他们的实现。

<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

本教程内容只覆盖了一小部分、但却是非常重要的canvas标记的应用功能——图像显示和处理。

设置图片来源

最常见的在canvas上画图的方法是使用Image对象。所支持的来源图片格式依赖于浏览器的支持,然而,一些典型的图片格式(png,jpg,gif等)基本上都没有问题。

图片可以从DOM中已经加载的元素中抓取,也可以按需即时创建。

// 抓取页面上已有的图片。

  1. var myImage = document.getElementById(‘myimageid’);// 或创建一个新图片。
  2. myImage = new Image();
  3. myImage.src = ‘image.png’;
复制代码


大多数支持canvas标记的浏览器的当前版本中,当图片还没有加载完成时,如果你要去画它,结果是什么事情都不会发生。也就是说,如果你想画一个图片,你需要等它完全加载。你可以使用图片对象的onload函数来进行判断。
  1. // Create an image.
  2. myImage = new Image();
  3. myImage.onload = function() {
  4. // Draw image.
  5. }
  6. myImage.src = ‘image.png’;
复制代码

在下面的所有例子中,我们的图片源将会使用这个256×256尺寸的大猩猩。
image.png
绘制图片
在最基本的画图操作中,你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法,图像可以简单的以其原尺寸被画在画布上。
  1. drawImage(image, x, y)
  2. var canvas = document.getElementById(‘myCanvas’);
  3. var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50);
  4. ctx.drawImage(myImage, 125, 125);
  5. ctx.drawImage(myImage, 210, 210);
复制代码

图片变形
改变图像的尺寸,你需要使用重载的drawImage函数,提供给它希望的宽度和高度参数。
  1. drawImage(image, x, y, width, height)
  2. var canvas = document.getElementById(‘myCanvas’);
  3. var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,
  4.                  50, 50, 100, 100);
  5. ctx.drawImage(myImage, 125, 125, 200, 50);
  6. ctx.drawImage(myImage, 210, 210, 500, 500);
复制代码

这个例子演示了如何画一个比原图小的图像,一个不同长宽比的图像和一个比原图大的图像的方法。
scale.png
图片裁剪
最后一个drawImage方法的功用是对图像进行裁剪。

drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)


参数很多,但基本上你可以把它想成从原图中取出一个矩形区域,然后把它画到画布上目标区域里。
  1. var canvas = document.getElementById(‘myCanvas’);
  2. var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,
  3.                 0, 0, 50, 50, 25, 25, 100, 100);
  4. ctx.drawImage(myImage, 125, 125, 100, 100, 125, 125, 150, 150);
  5. ctx.drawImage(myImage, 80, 80, 100, 100, 250, 250, 220, 220);
复制代码

这些就是HTML5中的canvas(画布)标记里进行绘图和处理图像的基本操作。



转自houoop


更多
7

鲜花
1

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (9 人)

发表评论

最新评论

引用 mosea_k 2012-6-12 21:52
什么代码啊   没看懂
引用 345219550 2012-7-24 11:07
这个标签很强大....
引用 shany 2012-8-22 14:58
教程太烂
引用 阳光诚信大哥 2012-9-10 21:32
谢谢分享
引用 Cater 2012-11-10 08:06
内容描述还算具体。就是几个函数的应用。。。
引用 ilvhtml5 2012-11-28 17:51
引用 baoyue 2013-12-12 17:28
谢谢分享!
引用 JavaScript1998 2014-3-29 13:58
这个,真没看懂!
引用 rpgforever 2014-9-13 11:42
感谢分享。。。。。。。。。。

查看全部评论(9)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-27 16:12

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部