使用 HTML5 Canvas 绘制画笔应用

分享于 

8分钟阅读

Web开发

  繁體

屏幕截图主页

介绍

我认为使软件应用程序的最佳方式是"开发基于web的应用程序并将它的托管",因这里,我们不必担心安装,易于管理版本。 同时我们的应用可以支持 Windows,Linux,iOS,安卓,等等 等不同平台。 这意味着用户可以在平板电脑/移动设备上运行应用。

云上有很多基于浏览器的应用程序,但它的中一些要求添加或者 [I reckon] 安装,因为某些平台不了解 Add-Ins。

HTML5技术可以解决大多数这些问题,这是使用HTML5和JavaScript的基本画笔应用程序。

Background

我从不同的代码分享站点和博客中收集了。 要进行本教程,你需要了解一些关于 C#。ASP.NET。JavaScript和客户端服务器技术的知识。

请参考 www.w3schools.com 获取每个HTML5对象的属性和事件的详细信息。

入门

下载附加到本文的源和可执行文件。 解压压缩文件。

下载并安装 Ajax工具包 [ AjaxControlToolkit.dll ]。 将 AjaxControlToolkit.dll 复制到文件夹文件夹。

你必须配置IIS以运行这里应用程序。 配置IIS的步骤如下:

  • 开放 控制面板 -> 管理工具-> 因特网信息服务( IIS ) 管理器。 在启动-> 运行中键入"inetmgr",然后单击确定。
  • 在"internet信息服务( IIS ) 管理器"。在网站上单击鼠标右键,然后单击"中添加网站"。
  • 输入站点 NAME [。例如:paintbrushapp],主机 NAME [: mylocalmachine],端口号[。例如:8080 ]。
  • 选择解压可执行文件 [path of Default.aspx ]的物理路径。
  • 按确定创建你的网站

现在已经配置了 IIS。现在为你的默认浏览器启用弹出 Windows 和 JavaScript。 Type: 在你的浏览器地址栏中输入 http://mylocalmachine:8080/ 并输入。 [Replace with your host yf_str_pftf65dfojwws3tpnrxwo6k7nzqw2zkaenacgqbdjzau2rk7pftf65dfojwws3tpnrxwo6i8_yf_str and port number. ]

现在画笔应用程序将启动。 Visual Studio 中的[You can open the solution file [.sln] 或者项目文件 [.csprj],并运行 it]。 通过运行这个应用程序,你将得到一个独立的浏览器窗口,左边有一个画布和工具箱。 绘图,线条和方形按钮是自由绘制项目。 你可以单击相应的按钮并在画布上开始绘图。

单击打开按钮将打开一个AJAX窗口来选择图像文件。 选择要打开的图像文件并单击"确定"。 选定的图像文件将加载到画布。

屏幕抓图打开文件

你可以通过单击页面大小按钮来调整新画布的宽度和高度。

屏幕大小调整页面大小

单击文本按钮,在画布上单击所需的位置,可以在画布中添加文本。 键入弹出框中的文本,然后按"确定"。

屏幕截图添加文本

最后,你有保存和退出选项。 单击保存将打开新窗口上的图像。 你可以通过右键单击 [right click and save image] 保存图像,也可以打印它。 单击退出按钮后,用户确认后将关闭应用程序。

屏幕截图确认退出

使用代码

虽然它在浏览器上运行,但我们制作一个应用程序,[not a website]。

浏览器不需要地址栏。状态栏。后退按钮。 因此,从页面,我们为应用程序打开一个新窗口,而没有所有这些额外的东西。

//// Load Complete Event of Default.aspx Page//protectedvoid Load_Complete(object sender, EventArgs e)
{
 ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
 "Script", " <script language="'javascript'">" +
 " NewWin=window.open('PaintBrushCanvas.aspx',null, 'resizable=yes,menubar=no,toolbar=no," +
 " location=no,directories=no,status=no');" +
 " window.open('','_self','');" +
 " setTimeout('self.close();',1000);</script>", false);
}
页面设计

在 PaintBrushCanvas.aspx 页面中,我们有一个带有两个列的table: 一个用于工具箱 [left],另一个用于画布 [right]。

画布应该放置 inside,它的位置。overflow 和scrollbar-base-color样式定义为容器 <div id="container">。 如果画布大小超过屏幕大小,则会启用滚动条。

#container { position: relative; overflow: auto; scrollbar-base-color:#ffeaff; }
最大化状态

对于应用程序窗口的初始最大化状态,我们应该在 head 部分添加 below 脚本 inside。

<scripttype="text/javascript"> window.moveTo(0, 0);
 window.resizeTo(screen.width, screen.height);</script>
初始化

我们所有的JavaScript代码都在 CanvasUtils.js 文件中。 所有样式都定义为 inside StyleSheet.css 文件。 我们应该从 body 标记的onload 事件发出一个 init() 调用来初始化应用程序 [ onload="init();" ]。 Init () 函数将使画布对象的2D 上下文,调整画布和容器的大小,连接所有画布事件,并选择默认工具。 我们有一个工具 array 来保存所有画布绘制工具[ var tools = {}; ] 和 ev_canvas 处理画布的所有鼠标事件并定向到选定的工具函数。

try {if (ev.layerX || ev.layerX == 0) { // Firefox ev._x = ev.layerX;
 ev._y = ev.layerY;
} elseif (ev.offsetX || ev.offsetX == 0) { // Opera ev._x = ev.offsetX;
 ev._y = ev.offsetY;
}
 // Call the event handler of the tool.var func = tool[ev.type];
 if (func) {
 func(ev);
 }
}catch (err) {
 alert(err.message);
}

对于所有绘图工具,我们只使用基本的canvas函数,例如:

  • lineTo - 绘制线条
  • clearRect - 清除画布中的rectangle 区域
  • moveTo - 将活动位置移动到给定像素
  • fillText - 在画布上绘制文本
  • strokeRect - 绘制 rectangle
画布层

我们使用了两层画布,顶层画布是透明画布。

所有手绘工具最初绘制在顶层 [transparent] 画布和鼠标上 [that means we finished a continuous drawing]。 我们使用 img_update() 函数更新 background 画布,并清除临时顶层画布。

function img_update() {
 contexto.drawImage(canvas, 0, 0);
 context.clearRect(0, 0, canvas.width, canvas.height);
}
保存图像/画布

用户单击保存按钮时,使用 toDataURL() 函数将画布转换为 Image 对象,并在新窗口中打开 Image:

var img = destinationCanvas.toDataURL("image/png");
WindowObject = window.open('', "PrintPaintBrush", "toolbars=no,scrollbars=yes,status=no,resizable=no");
WindowObject.document.open();
WindowObject.document.writeln('<img src="' + img + '"/>);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();

Points of Interest

许多软件应用程序已经开始在它的web表单中使用 HTML5,。 我在一个流行的客户关系管理系统中看到了"签名垫"的,它是使用HTML5-Canvas开发的。

历史记录

  • 草稿版本:24 2012年月。

Html5  CAN  Canvas  Html5 Canvas  Paint  刷子  
相关文章