关于html5如何在canvas中插入图片的示例详解


当前第2页 返回上一页

基本绘画

在最基本的画图操作中,你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法,图像可以简单的以其原尺寸被画在画布上。

1

2

3

4

5

6

drawImage(image, x, y)

var canvas = document.getElementById(‘myCanvas’);

var ctx = canvas.getContext(’2d’);

ctx.drawImage(myImage, 50, 50);

ctx.drawImage(myImage, 125, 125);

ctx.drawImage(myImage, 210, 210);

缩放及调整尺寸

改变图像的尺寸,你需要使用重载的drawImage函数,提供给它希望的宽度和高度参数。

1

drawImage(image, x, y, width, height)

1

2

3

4

var canvas = document.getElementById(‘myCanvas’);

var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100);

ctx.drawImage(myImage, 125, 125, 200, 50);

ctx.drawImage(myImage, 210, 210, 500, 500);

图像裁剪

最后一个drawImage方法的功用是对图像进行裁剪。

1

2

3

4

5

6

7

8

9

drawImage(image,

sourceX,

sourceY,

sourceWidth,

sourceHeight,

destX,

destY,

destWidth,

destHeight)

参数很多,但基本上你可以把它想成从原图中取出一个矩形区域,然后把它画到画布上目标区域里。

以上就是关于html5如何在canvas中插入图片的示例详解的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html5拖放(drag 和 drop)实例讲解

html中的title是什么意思?

html5新特性之跨文档消息传输详解

了解一下html5中新增加的标签

html5 meter标签是什么意思?html5 meter度量衡如何改变颜色详解

html5设置视频背景的方法介绍

html5实现动态视频背景

利用html5实现图片的淡入淡出效果

如何在html5中使用svg

使用adobe html5 extension的开发详解

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




打赏

取消

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

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

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

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

评论

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