Canvas 输出位图

最新推荐文章于 2024-04-07 09:40:53 发布

iteye_5722

最新推荐文章于 2024-04-07 09:40:53 发布

阅读量295

点赞数

分类专栏： HTML5 文章标签： Canvas 输出位图

HTML5 专栏收录该内容

14 篇文章

订阅专栏

一介绍

toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。

dataURL是将数据按base64进行编码，它是一种保存二进制的方式。

下面通过这种方法输出位图。

二代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 位图输出 </title>
</head>
<body>
<h2> 位图输出 </h2>
<canvas id="mc" width="360" height="280"
	style="border:1px solid black"></canvas>
<img id="result" src="" alt="图片输出"/>
<script type="text/javascript">
	// 获取canvas元素对应的DOM对象
	var canvas = document.getElementById('mc');
	// 获取在canvas上绘图的CanvasRenderingContext2D对象
	var ctx = canvas.getContext('2d');
	ctx.save();
	ctx.translate(30 , 20);
	var image = new Image();
	image.src = "wjc.gif";
	image.onload = function()
	{
		// 创建位图填充
		imgPattern = ctx.createPattern(image, "repeat");
		// 设置使用位图填充作为填充颜色
		ctx.fillStyle = imgPattern;
		// 填充一个矩形
		ctx.fillRect(0 , 0 , 160 , 80);
		// 恢复坐标系统
		ctx.restore();
		// 平移坐标系统
		ctx.translate(280 , 160)
		ctx.beginPath();
		// 添加圆弧
		ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
		ctx.closePath();
		ctx.lineWidth = 12;
		// 设置使用位图填充作为边框颜色
		ctx.strokeStyle = imgPattern;
		ctx.stroke();
		// 使用img元素来显示Canvas的输出结果
		document.getElementById("result").src = canvas.toDataURL("image/png");
	}
</script>
</body>
</html>

三运行结果