当前第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讲解之datatransfer对象
关于html5中自定义属性的介绍
让ie支持html5的方法
html5与web前端有什么区别
html5在工作中主要干什么
css实现页面底部固定的方法介绍（附代码）
canvas使用贝塞尔曲线平滑拟合折线段的方法详解
总结html5的新特性（面试必备）
canvas贝塞尔公式推导与物体跟随复杂曲线轨迹运动
html5实践-使用css实现弹性视频的代码分享
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 关于html5如何在canvas中插入图片的示例详解
