HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML Canvas绘图使用详解

HTML Canvas绘图使用详解

HTML5教程  手机阅读
<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尺寸的大猩猩。

绘制图片
在最基本的画图操作中,你需要的只是希望图像出现处的位置(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);
复制代码
这个例子演示了如何画一个比原图小的图像,一个不同长宽比的图像和一个比原图大的图像的方法。

图片裁剪
最后一个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


【HTML Canvas绘图使用详解】相关文章

1. HTML Canvas绘图使用详解

2. 浅谈如何使用HTML5的Canvas绘图

3. HTML5开发之Canvas绘图之实战入门

4. 使用 HTML5 canvas 进行 Web 绘图

5. 用Canvas绘制贝赛尔曲线

6. Zrender——轻量级Canvas类库,让绘图大不同!

7. 利用HTML 5和JavaScript创建绘图应用

8. HTML5 jQuery 绘图插件

9. HTML5 jQuery 绘图插件

10. HTML5应用程序缓存Application Cache详解

本文来源:https://www.51html5.com/a634.html

点击展开全部
上一篇:HTML5 Canvas动画设计解析 下一篇:HTML5 Canvas 起步(3) - 颜色与渐变

﹝HTML Canvas绘图使用详解﹞相关内容

「HTML Canvas绘图使用详解」相关专题

canvas var canvas元素
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢