把canvas绘制的图形导出成图片

最新推荐文章于 2024-08-22 11:32:42 发布

sdfujichao

最新推荐文章于 2024-08-22 11:32:42 发布

阅读量2.4k

点赞数 1

分类专栏： html5—canvas

本文链接：https://blog.csdn.net/sdfujichao/article/details/51863697

版权

html5—canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在canvas中绘制的图形可以导出成图片。是用canvas时要注意的是width和height要以属性的方式来下，不能放在style里面来写，否则canvas的大小就是按照把150*300扩大或者缩小了。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<input type="button" id="btn" />
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(50,50))
	{
		alert('fuji')

	ctx.stroke();
	};
	
	var btn = document.getElementById("btn");
	btn.addEventListener('click',function(){
			var mycanvas = document.getElementById("myCanvas");  
                var imageURL    = mycanvas.toDataURL("image/png"); 
                var img = document.createElement("img");
                img.src = imageURL;
                document.body.appendChild(img)
                
	})
</script> 

</body>
</html>