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

    第一种: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(){}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发

android 圆角图片的实现和封装

下面为主要源码,实现了 Picasso 中的 Transformation 接口。

1534
来自专栏项勇

笔记20 | 学习整理开源APP(BaseAnimation)程序源码“中的通讯录效果(一)

1715
来自专栏Jack的Android之旅

淘宝开源库VLayout实践

最近淘宝出了vlayout,刚开始看淘宝的文档的时候还是有点懵,后来自己也总结规划了一下,写了一个比较好看的demo,顺便在这里总结一下。

1812
来自专栏Android干货园

Android源码解析-仿今日头条PagerSlidingTabStrip滑动页面导航效果

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

4242
来自专栏何俊林

Android View框架总结(六)View布局流程之Draw过程

View的Layout时序图 ViewRootImpl.performTraversals过程 ViewRootImpl.performDraw过程 View....

2296
来自专栏Android小菜鸡

Touch事件实现View拖动

  Touch监听事件可以监听手指在屏幕上的行为,例如按下、滑动。抬起。根据这些事件,可以做出View任意推动的效果。

1581
来自专栏向治洪

android View层的绘制流程

还记得前面《Android应用setContentView与LayoutInflater加载解析机制源码分析》这篇文章吗?我们有分析到Activity中界面加...

2079
来自专栏codelang

仿电商商品分类的思路实现

1572
来自专栏Android干货

Android项目实战(十四):TextView显示html样式的文字

4288
来自专栏李蔚蓬的专栏

Material Design 实战 之第二弹——滑动菜单详解&实战

本模块共有六篇文章,参考郭神的《第一行代码》,对Material Design的学习做一个详细的笔记,大家可以一起交流一下:

1233

扫码关注云+社区

领取腾讯云代金券