37 canvas导出为图像及事件操作

最新推荐文章于 2024-03-13 10:43:35 发布

丨Anna丨

最新推荐文章于 2024-03-13 10:43:35 发布

阅读量263

点赞数

分类专栏：前端重拾 # canvas 文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109363848

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

37 canvas导出为图像及事件操作

1 canvas导出为图像

语法

toDataURL()
注意是canvas元素接口上的方法，返回一个BASE64的图片信息

示例

	<head>
		<meta charset="UTF-8">
		<title>25_导出为图像</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillRect(100,100,50,20);
				var imageBage64 = canvas.toDataURL();
				console.log(imageBage64)
			}
		</script>
	</body>

效果

2 事件操作

语法

	ctx.isPointInPath(x, y)
		判断在当前路径中是否包含检测点
			x:检测点的X坐标
			y:检测点的Y坐标
	
	注意，此方法只作用于最新画出的canvas图像

示例

	<head>
		<meta charset="UTF-8">
		<title>26_事件</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.arc(50,50,50,0,360*Math.PI/180);
				ctx.fill();
				
				ctx.arc(150,150,50,0,360*Math.PI/180);
				ctx.fill();
				
				canvas.onclick = function(ev){
					ev = ev || window.event;
					var x = ev.clientX - canvas.offsetLeft;
					var y = ev.clientY - canvas.offsetTop;
					if(ctx.isPointInPath(x,y)){
						alert(123);
					}
				}
			}
		</script>
	</body>

效果