`
cakin24
  • 浏览: 1388408 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Canvas 输出位图

阅读更多
一 介绍
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>
 
三 运行结果


 
  • 大小: 28.5 KB
1
0
分享到:
评论

相关推荐

    Delphi Canvas方法在图片上写入文字.rar

    在Delphi编程环境中,Canvas对象是用于图形绘制的核心组件,特别是在处理位图、画布和其他图形表面时。这个“Delphi Canvas方法在图片上写入文字.rar”压缩包可能包含了如何利用Canvas对象在图片上添加文本的示例...

    Delphi Canvas应用

    对于文本绘制,Canvas.TextOut和Canvas.DrawString等方法可以实现自定义位置和样式的文本输出。 在描述中提到的“发票单据打开”场景,可能是利用Canvas来显示和打印发票。开发者可能需要利用Canvas来绘制发票的...

    OpenGL Canvas for Delphi

    填充多边形、矩形、三角形、曲线封闭区域,并可输出文字、位图。 5. 每一个绘图方法都返回画布自身指针,支持链式操作。 6. 支持坐标变换后,Windows自身画布坐标到实际坐标的反计算,可以 方便实现鼠标拾取等...

    DELPHI打印文本和位图例程

    在Delphi中,`TBitmap`类用于创建和操作位图,而`TPrinter`的`Canvas`同样可以用来绘制位图。以下是一个基本步骤: 1. 创建一个`TBitmap`对象:`var Bitmap: TBitmap;` 2. 加载或创建位图:`Bitmap.LoadFromFile('...

    BMFont工具 (unity使用BMFont制作位图字体)

    BMFont支持多种输出格式,包括XML、JSON和图片格式,这些格式都适用于Unity引擎。通过BMFont,开发者可以轻松地调整字体样式,如字体大小、行间距、基线等,并且可以预览效果,确保字体在游戏中的视觉表现符合预期。...

    FingerPaintView,用于绘制位图的android库.zip

    这个库不仅实现了基本的绘画功能,如绘制线条、填充颜色,还考虑到了实际应用中的细节,例如缩放和转换,确保最终的位图输出与屏幕上显示的内容完全一致。这解决了在不同屏幕尺寸和分辨率设备上保持画布比例和清晰度...

    canvas上传图片base64-有裁剪功能-Jcrop.js

    1.canvas上传图片base64-有裁剪功能-Jcrop.js 2.3.可以设置是否-上传图片大小,limitImg = true 3.4.可以设置是否-有裁剪图片大小条件,limitImg = true,可手动更改 可预览图片地址 ...

    一键把swf转为html5canvas动画Fanvas.zip

    Fanvas是Flash和Canvas的完美结合,可以把swf(包括矢量和位图)完美地转化为canvas动画,让美术妹子一次制作,到处运行。。。嘿嘿~~~让美术妹子也搭上H5的快车。技术难点:兼容swf的各种格式,主要是各种矢量命令和...

    HTML5 Canvas锯齿图代码实例

    因此,如果希望在Canvas上实现更高质量的图形展示,开发者需要仔细考虑图形的渲染分辨率和输出分辨率,并尽可能在图像质量与性能之间取得平衡。 总而言之,HTML5 Canvas锯齿图代码实例为我们展示了一种简单的技术...

    Canvas绘图程序Java

    Canvas类被用作图形输出的目标,允许程序员直接在屏幕上绘制图形,实现自定义的图形界面或者游戏。这个"Canvas绘图程序Java"源码集合可能包含了一系列用于演示和学习如何使用Canvas进行图形绘制的示例代码。 首先,...

    Delphi开发技巧之-图形图像

    在TImage上输出透明文字 在TImage中绘制ICON 在桌面上画透明文字 在桌面上绘制位图 在鼠标下面的控件画加亮框 垂直标题栏 定制caret 将窗体作为位图复制到剪贴板并保存为文件 平滑改变JPEG图像大小 改变位图颜色通道...

    Delphi中利用Tbitmap实现窗体图形动态打印.rar_delphi 打印

    例如,你可以使用Canvas.FillRect()方法填充矩形,Canvas.Draw()方法绘制图片,或者Canvas.TextOut()方法输出文本。 动态打印窗体图形的核心在于捕获窗体的视觉状态并将其转换为TBitmap对象。在Delphi中,你可以...

    Delphi在Image控件中显示文字.rar

    Canvas对象提供了许多绘图方法,包括DrawText、TextOut和DrawTextEx等,可以用来在任何支持Canvas的控件上绘制文字。例如,我们可以这样在Image控件上写入文字: ```delphi procedure TForm1.Button1Click(Sender...

    计算机软件-编程源码-Delphi中利用Tbitmap实现窗体图形动态打印.zip

    在TBitmap准备好后,可以通过TPrinter的Canvas来绘制位图。首先,设置Printer的属性,如PageSize和Orientation,然后在OnBeginPrint事件中绘制TBitmap。 ```delphi procedure TForm1.Printer1BeginPrint(Sender: T...

    Android代码实现截屏

    可以使用`Bitmap.compress(Bitmap.CompressFormat, quality, OutputStream)`方法,传入合适的压缩格式和质量参数,以及一个输出流来保存到文件或发送到其他地方。 在这个过程中,值得注意的是,由于我们仅截取了...

    bmpfont-generator

    $ npm install -g @akashic/bmpfont-generator如何使用指定用于绘制位图字体的TrueType字体(ttf格式)的文件名和输出位图字体(png格式)的文件名。 $ bmpfont-generator infile.ttf outfile.png帮助$ bmpfont-...

    打印二维码,delphi输出二维码

    本文将深入探讨如何在Delphi中实现二维码的输出和打印,以及可能涉及到的相关技术。 首先,我们需要一个能够处理二维码的库。有许多第三方库可供选择,例如ZXing(Zebra Crossing)或QREncode。这些库通常提供API或...

    C++Builder中使用图形.rar_C Builder_builder_c builder_c++ builder c

    - **文本输出(TextOut)**:此函数用于在指定位置输出文本,可以调整字体、颜色和对齐方式。 3. **颜色和笔样式** - **颜色(Color)**:Canvas的Color属性用于设置画布的背景色,也可以为线条和填充设置颜色。 ...

    bitmap_tranformer:位图转换器项目

    例如,他们可以指定输入和输出文件路径,设置转换参数,如旋转角度、质量设置等。项目的源代码应该包含了处理这些输入并执行相应转换的逻辑。 总体来说,"bitmap_transformer"项目是一个用JavaScript编写的位图图像...

Global site tag (gtag.js) - Google Analytics