Html5 Canvas Image的图文代码详解(一)


本文摘自PHP中文网,作者黄舟,侵删。

Canvas所支持的Image API是非常强大的;我们可以直接加载图像,将其显示在Canvas上,也可以切割和拼接显示所需的任何图像部分;

此外,Canvas给我们提供的存储其像素数据的功能,我们可以通过操纵像素数据,然后重新绘制到Canvas上。

虽然Canvas只有提供少数的Image API函数,但它开辟一个像素级别操纵的世界;

它使开发人员可直接在Web浏览器中创建优化的应用程序,而无需任何插件。

Canvas Api允许访问DOM定义的Image对象:<img></img>,

同时也支持用javascript创建Image对象实例:var img1=new Image();

创建image后,可以设置它的路径:img1.src="my.png";

当Image在代码中被调用前,我们要确保它可以被加载,被使用;当Image的load事件发生时,我们可以创建一个监听事件去触发对Image的操作;

img1.addEventListener('load', eventLoaded , false);

当Image完全加载完成,eventLoaded将被触发执行;在些事件中,我们可以来执行对Image的操作;

function eventLoaded() { drawScreen();//对Image操作的主要方法入口; }

显示Image(display image);

方法:drawImage(image,x,y):

image表示将要绘制的图像;

(x,y)表示image绘制在Canvas上时,image左上角的位置;

调整Image大小(resize image)

方法:drawImage(image,x,y,width,height):

image表示原始图像;

把image按照参数[width,height]调整大小,形成NewImage;

(x,y)表示NewImage绘制在Canvas上时,NewImage左上角的位置;

取Image的一些部分(part of image)

drawImage(image, sx, sy, sw, sh, x, y, width, height)

image表示原始图像;

点(sx,xy)与[宽sw,高sh]形成一个矩形,是针对image的操作,取原始image的一部分形成新的partImage;

把partImage按照参数[width,height]调整大小,形成NewImage;

(x,y)表示NewImage绘制在Canvas上时,NewImage左上角的位置;

example实例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Images</title>

<script type="text/javascript" src="../script/modernizr-latest.js"></script>

<script type="text/javascript">

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded() {

canvasApp();

}

 

function canvasSupport() {

return Modernizr.canvas;

}

 

function eventWindowLoaded() {

canvasApp();

}

 

function canvasApp() {

 

if(!canvasSupport()) {

return;

}

var theCanvas = document.getElementById("canvasOne");

var context = theCanvas.getContext("2d");

 

var imgmain = new Image();

imgmain.addEventListener('load', eventLoaded, false);

imgmain.src = "image.png";

 

function eventLoaded() {

drawScreen();

}

 

function drawScreen() {

context.fillStyle = "#EEEEEE";

context.fillRect(0, 0, theCanvas.width, theCanvas.height)

//display image107*86

context.drawImage(imgmain, 0, 0);

context.drawImage(imgmain, 120, 0);

//resize image

context.drawImage(imgmain, 0, 90, 107, 86);

context.drawImage(imgmain, 120, 90, 53, 43);

context.drawImage(imgmain, 190, 90, 26, 21);

//part of image

context.drawImage(imgmain, 0, 0, 107, 86, 0, 180, 107, 86);

context.drawImage(imgmain, 0, 0, 57, 86, 120, 180, 57, 86);

context.drawImage(imgmain, 50, 0, 57, 86, 190, 180, 57, 86);

context.drawImage(imgmain, 0, 0, 57, 43, 260, 180, 57, 43);

context.drawImage(imgmain, 50, 43, 57, 43, 330, 223, 57, 43);

}

}

</script>

</head>

<body>

<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="300">

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>

实例中引用的图:

实例效果图:

以上就是Html5 Canvas Image的图文代码详解(一) 的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5互联网:地铁行业新模式

HTML5程序员需要学习的技能总结

分享一个video标签无法播放mp4的问题以及解决方案

有关HTML5页面在iphonex适配问题

HTML5拖拽功能实现的拼图游戏

HTML5本地存储应用sessionstorage和localstorage

HTML5开发实例-threejs实现粒子动画飘花效果代码分享

HTML5 details标签的作用是什么?<details>标签的使用方法介绍(附使用实例)

h5的语义化标签新特性应该如何使用

HTML5 高级教程之web storage

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...