当前第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中插入图片的示例详解的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
配置h5的滚动条样式
html5新知识
html5实现移动端下拉刷新（原理和代码）
h5可以导出成视频吗？
如何使用html5的page visibility api来实现获取焦点js事件
html5中5大存储方式汇总
html5-web storage apis的简述
html5 canvas标签的作用以及canvas标签的历史由来介绍
总结html5的新特性（面试必备）
html5中的强制下载属性download使用
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 关于html5如何在canvas中插入图片的示例详解
