一 介绍
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>
三 运行结果
相关推荐
在Delphi编程环境中，Canvas对象是用于图形绘制的核心组件，特别是在处理位图、画布和其他图形表面时。这个“Delphi Canvas方法在图片上写入文字.rar”压缩包可能包含了如何利用Canvas对象在图片上添加文本的示例...
对于文本绘制，Canvas.TextOut和Canvas.DrawString等方法可以实现自定义位置和样式的文本输出。 在描述中提到的“发票单据打开”场景，可能是利用Canvas来显示和打印发票。开发者可能需要利用Canvas来绘制发票的...
填充多边形、矩形、三角形、曲线封闭区域，并可输出文字、位图。 5. 每一个绘图方法都返回画布自身指针，支持链式操作。 6. 支持坐标变换后，Windows自身画布坐标到实际坐标的反计算，可以 方便实现鼠标拾取等...
在Delphi中，`TBitmap`类用于创建和操作位图，而`TPrinter`的`Canvas`同样可以用来绘制位图。以下是一个基本步骤： 1. 创建一个`TBitmap`对象：`var Bitmap: TBitmap;` 2. 加载或创建位图：`Bitmap.LoadFromFile('...
BMFont支持多种输出格式，包括XML、JSON和图片格式，这些格式都适用于Unity引擎。通过BMFont，开发者可以轻松地调整字体样式，如字体大小、行间距、基线等，并且可以预览效果，确保字体在游戏中的视觉表现符合预期。...
这个库不仅实现了基本的绘画功能，如绘制线条、填充颜色，还考虑到了实际应用中的细节，例如缩放和转换，确保最终的位图输出与屏幕上显示的内容完全一致。这解决了在不同屏幕尺寸和分辨率设备上保持画布比例和清晰度...
1.canvas上传图片base64-有裁剪功能-Jcrop.js 2.3.可以设置是否-上传图片大小，limitImg = true 3.4.可以设置是否-有裁剪图片大小条件，limitImg = true，可手动更改 可预览图片地址 ...
Fanvas是Flash和Canvas的完美结合，可以把swf（包括矢量和位图）完美地转化为canvas动画，让美术妹子一次制作，到处运行。。。嘿嘿~~~让美术妹子也搭上H5的快车。技术难点：兼容swf的各种格式，主要是各种矢量命令和...
因此，如果希望在Canvas上实现更高质量的图形展示，开发者需要仔细考虑图形的渲染分辨率和输出分辨率，并尽可能在图像质量与性能之间取得平衡。 总而言之，HTML5 Canvas锯齿图代码实例为我们展示了一种简单的技术...
Canvas类被用作图形输出的目标，允许程序员直接在屏幕上绘制图形，实现自定义的图形界面或者游戏。这个"Canvas绘图程序Java"源码集合可能包含了一系列用于演示和学习如何使用Canvas进行图形绘制的示例代码。 首先，...
在TImage上输出透明文字 在TImage中绘制ICON 在桌面上画透明文字 在桌面上绘制位图 在鼠标下面的控件画加亮框 垂直标题栏 定制caret 将窗体作为位图复制到剪贴板并保存为文件 平滑改变JPEG图像大小 改变位图颜色通道...
例如，你可以使用Canvas.FillRect()方法填充矩形，Canvas.Draw()方法绘制图片，或者Canvas.TextOut()方法输出文本。 动态打印窗体图形的核心在于捕获窗体的视觉状态并将其转换为TBitmap对象。在Delphi中，你可以...
Canvas对象提供了许多绘图方法，包括DrawText、TextOut和DrawTextEx等，可以用来在任何支持Canvas的控件上绘制文字。例如，我们可以这样在Image控件上写入文字： ```delphi procedure TForm1.Button1Click(Sender...
在TBitmap准备好后，可以通过TPrinter的Canvas来绘制位图。首先，设置Printer的属性，如PageSize和Orientation，然后在OnBeginPrint事件中绘制TBitmap。 ```delphi procedure TForm1.Printer1BeginPrint(Sender: T...
可以使用`Bitmap.compress(Bitmap.CompressFormat, quality, OutputStream)`方法，传入合适的压缩格式和质量参数，以及一个输出流来保存到文件或发送到其他地方。 在这个过程中，值得注意的是，由于我们仅截取了...
$ npm install -g @akashic/bmpfont-generator如何使用指定用于绘制位图字体的TrueType字体（ttf格式）的文件名和输出位图字体（png格式）的文件名。 $ bmpfont-generator infile.ttf outfile.png帮助$ bmpfont-...
本文将深入探讨如何在Delphi中实现二维码的输出和打印，以及可能涉及到的相关技术。 首先，我们需要一个能够处理二维码的库。有许多第三方库可供选择，例如ZXing（Zebra Crossing）或QREncode。这些库通常提供API或...
- **文本输出（TextOut）**：此函数用于在指定位置输出文本，可以调整字体、颜色和对齐方式。 3. **颜色和笔样式** - **颜色（Color）**：Canvas的Color属性用于设置画布的背景色，也可以为线条和填充设置颜色。 ...
例如，他们可以指定输入和输出文件路径，设置转换参数，如旋转角度、质量设置等。项目的源代码应该包含了处理这些输入并执行相应转换的逻辑。 总体来说，"bitmap_transformer"项目是一个用JavaScript编写的位图图像...