当前第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如何设置文字颜色灰色
h5最全面解读
用h5制作烟花粒子特效的制作方法
用h5的webgl如何在同一个界面做出json和echarts图表
html5中在可拖动元素或选取的文本正在拖动到放置目标时触发的事件ondragover
分享一个简单的html5 视频嵌入实例代码
html5与html的区别有哪些
html5中5大存储方式汇总
canvas实现圆形进度条并显示数字百分比
h5的新增标签和废弃标签
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 关于html5如何在canvas中插入图片的示例详解
