首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas实现图片插入画板三种方式

canvas实现图片插入画板三种方式

作者头像
十月梦想
发布2018-08-29 11:04:25
5160
发布2018-08-29 11:04:25
举报
文章被收录于专栏:十月梦想十月梦想

    第一种:getContext.drawImage(图片,画板left位置,画板top位置);

代码用法:

 cv.drawImage(xiaogou,100,200);

    第二种:getContext.drawImage(图片,画板left位置,画板top位置,插入画板后图片的width,图片height);

代码用法:

 cv.drawImage(xiaogou,100,200,400,400);

    第一种:getContext.drawImage(图片,截取图片的left位置,图片的top位置,,截取图片width,截取图片height,画板left位置,画板top位置,画板中图片的width,图片height);

    代码用法:  

 cv.drawImage(xiaogou,10,20,50,30,100,200,400,300);

完整用法实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas图片划入画布</title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			canvas{
				background:#272822;
			}
		</style>
	</head>
	<body><img src="xiaogou.jpg" alt="" width="500" height="300" id="xiaogou"/>
		<canvas id="canvas" width="900" height="500" ></canvas>
		
		<script type="text/javascript">
			var xiaogou=document.getElementById("xiaogou");
			var c=document.getElementById("canvas");
			var cv=c.getContext('2d');
//			xiaogou.onload=function(){
//				
//				cv.drawImage(xiaogou,100,200);
//			}
//			xiaogou.onload=function(){
//				cv.drawImage(xiaogou,100,200,400,400);
//			}
			xiaogou.onload=function(){
				cv.drawImage(xiaogou,10,20,50,30,100,200,400,300);
			}
		</script>
	</body>
</html>

PS:在谷歌浏览器会出现无法写入画板情况,原因是由于图片未加载完毕使用:图片对象.onload=function(){}

此代码会当图片完全加载才执行写入画板操作,不会出现图片未加载进行希尔,找不到图片对象的空标签出现画板空白!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-1-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档