Canvas 输出位图

- 日理万妓 2022-05-12 00:40 178阅读 0赞

**一 介绍**

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>

** **

**三 运行结果**

![9c5146e4-7790-3dab-9e2a-062840571810.png][]

[9c5146e4-7790-3dab-9e2a-062840571810.png]: /images/20220512/db5b03bec1784192af943fe2fa8e6674.png

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas饼状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 09:51/ 0 赞/ 27 阅读

相关 24位位图转8位灰度图

如何用RGB转化得到的灰度数据写入8位bmp文件，请看如下代码其中lp中存储的是已经转化得到的现成灰度数据，标红的代码是与24位位图不同的地方。 <span st

た入场券/ 2022年08月05日 08:47/ 0 赞/ 258 阅读

相关位图

最近遇到一道题卡空间卡的很厉害，在网上搜了一下，发现了一个叫做位图的数据结构。位图的原理就是用一个int的32个比特位表示0~31个数是否存在，1表示存在，0表示不存在。

﹏ヽ暗。殇╰゛Y/ 2022年06月10日 09:26/ 0 赞/ 228 阅读

相关 canvas(柱状图)

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

客官°小女子只卖身不卖艺/ 2022年06月03日 02:55/ 0 赞/ 267 阅读

相关 canvas合成海报图

根据接口返回的参数生成一个带有相关链接的二维码然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面所需要的参数和图片列表都是父组件传过来的使用了之前写过的al

布满荆棘的人生/ 2022年05月12日 12:06/ 0 赞/ 230 阅读

相关 Canvas 输出位图

一介绍 toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。 dataURL是将数据按base64进行编码，它是一种保存二进制的方式

- 日理万妓/ 2022年05月12日 00:40/ 0 赞/ 179 阅读

相关 Canvas 位图裁剪

一位图裁剪方法 1、将需要从位图上裁剪的部分定义成Canvas的路径。 2、调用CanvasRenderingContext2D的的clip（）方法把路径剪切出来。 3

川长思鸟来/ 2022年05月12日 00:40/ 0 赞/ 215 阅读

相关 Canvas 位图填充

一位图填充方法 1、调用createPattern方法创建位图填充，该方法返回一个CanvasPattern对象。 2、将CanvasPattern对象赋值给Canvas

谁践踏了优雅/ 2022年05月12日 00:38/ 0 赞/ 278 阅读

相关位图

位图位图是一种很特殊的数据结构，可以

秒速五厘米/ 2022年03月29日 04:54/ 0 赞/ 279 阅读

相关 canvas雷达图

html <div class="title">墨言战力图</div> <canvas id="myCanvas" width="400" height=

以你之姓@/ 2021年09月16日 11:50/ 0 赞/ 495 阅读