使用 HTML 5 的 ASP.NET Web 绘画工具
4.83/5 (25投票s)
使用 HTML5 CANVAS 的 ASP.NET 绘图和绘画
引言
长期以来，我一直计划开发一个基于 Web 的绘画工具。我开发了一个作为 Windows 应用程序的绘画工具。但是使用 ASP.NET，我发现开发一个基于 Web 的绘画工具更加困难。最终，使用 HTML 5 CANVAS，我开发了一个简单的基于 Web 的绘画工具。 HTML 5 使我的工作变得更加轻松。使用 HTML 5 真的很有趣。互联网上有很多关于 HTML5 的教程，对于那些有兴趣学习 HTML5 的读者，请使用 Google 搜索。
现在，让我们看看 HTML5 Canvas 的基本介绍。那么什么是 HTML5 Canvas？ HTML5 Canvas 是一个在网页上绘制图形的元素。简单地说，我们可以说 Canvas 是网页上的一个矩形容器，我们可以在其中绘制图形。
为了创建一个基于 Web 的绘画工具，我们使用了带有 JavaScript 的 HTML5 CANVAS 元素。我们可以在代码中看到详细信息。
现在让我们看看一些关于 HTML5 和 CANVAS 标签需要了解的基础知识。
HTML5
HTML5 是 HTML 的新版本。 HTML5 具有跨平台支持，这意味着 HTML5 可以在 PC、平板电脑和智能手机中使用。 HTML5 应该以 DOCTYPE 开头，例如。
<!DOCTYPE html>
<html>
<body></body>
</html>
HTML5 中的新功能有 CANVAS、AUDIO、VIDEO 等。
CANVAS
CANVAS 是一个使用 JavaScript 进行 2D 绘图的元素。 CANVAS 具有绘制路径、矩形、弧线、文本等方法。
canvas 元素如下所示
<canvas id="canvas" width="400" height="400"></canvas>
有关 HTML5 和 CANVAS 标签的更多详细信息，请使用 Google。 HTML5 中有很多有趣的东西要学习。
Using the Code
主要目的是使程序非常简单易用；所有功能都在项目中得到了很好的注释。我已将我的示例程序附加到本文中以了解更多详细信息。在这里，我们将看到使用 HTML5 CANVAS 创建绘画工具的步骤。
CANVAS 只是一个我们可以创建图形的容器。要创建 2D 图形，我们需要在此代码中使用 JavaScript，我们将在下面详细介绍。
步骤 1
创建 Canvas 元素并声明全局变量，并在 JavaScript 中初始化 Canvas。 在代码中，我使用了注释以便于理解声明。
HTML Canvas 部分
<SECTION style="border-style: solid; border-width: 2px; width: 1024px;">
<CANVAS HEIGHT="740" WIDTH="1024px" ID="canvas">
Your browser is not supporting HTML5 Canvas.
Upgrade Browser to view this program or check with Chrome or in Firefox.
</CANVAS>
</SECTION>
JavaScript 声明部分
<SCRIPT>
//public Canvas object to use in all the functions.
//Main canvas declaration
var canvas;
var ctx;
var x = 75;
var y = 50;
//Width and Height of the canvas
var WIDTH = 1024;
var HEIGHT = 740;
// var dragok = false;
//Global color variable which will be used to store the selected color name.
var Colors="";
var newPaint = false;
var DrawingTypes = "";
//Circle default radius size
var radius = 30;
var radius_New = 30;
// Rectangle array
rect = {},
//drag= false default to test for the dragging
drag = false;
// Array to store all the old Shapes drawing details
var rectStartXArray = new Array();
var rectStartYArray = new Array();
var rectWArray = new Array();
var rectHArray = new Array();
var rectColor = new Array();
var DrawType_ARR = new Array();
var radius_ARR = new Array();
var Text_ARR = new Array();
// Declared for the Free hand pencil Drawing.
var prevX = 0,
currX = 0,
prevY = 0,
currY = 0;
//to add the Image
var imageObj = new Image();
//Initialize the Canvas and Mouse events for Canvas
function init(DrawType) {
newPaint = true;
canvas = document.getElementById("canvas");
x =5;
y = 5;
DrawingTypes = DrawType;
ctx = canvas.getContext("2d");
radius = 30;
radius_New = radius;
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
imageObj.src = 'images/Afraz.jpg';
return setInterval(draw, 10);
}
在 JavaScript 中，我声明了所有需要使用的全局变量，并初始化了 Canvas。 我为 Canvas 创建了 Mouse 事件。 创建 Mouse 事件是为了精确地在 Canvas 容器内单击鼠标的位置进行绘制。
第二步
使用 JavaScript 在 Canvas 容器上绘制和填充矩形。 我使用了颜色选择器。 默认情况下，选定的颜色将用于绘图。 用户可以选择不同的颜色。
HTML 绘图部分
<img src="images/rect.png" onClick="init('FillRect')" />
<img src="images/Circle.png" onClick="init('FillCircle')" />
<img src="images/Font.png" onClick="init('DrawText')" />
<img src="images/Pencil.png" onClick="init('FreeDraw')" />
<img src="images/Image.png" onClick="init('Images')" />
我放置了图像以绘制矩形、圆形、文本等。如果用户需要绘制圆形，请单击圆形图像，然后在Canvas 容器上绘制。 在图像单击中，我调用 JavaScript Init 方法并将绘图类型作为圆形，矩形等传递。在Init方法中，我们创建了 Canvas Mouse 事件，如 MouseDown、MouseMove 和 MouseUp。 这是鼠标事件的 JavaScript 方法。
JavaScript 鼠标事件部分
//Mouse down event method
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
radius_New = radius;
prevX = e.clientX - canvas.offsetLeft;
prevY = e.clientY - canvas.offsetTop;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
drag = true;
}
//Mouse UP event Method
function mouseUp() {
rectStartXArray[rectStartXArray.length] = rect.startX;
rectStartYArray[rectStartYArray.length] = rect.startY;
rectWArray[rectWArray.length] = rect.w;
rectHArray[rectHArray.length] = rect.h;
Colors = document.getElementById("SelectColor").value;
rectColor[rectColor.length] = "#" + Colors;
DrawType_ARR[DrawType_ARR.length] = DrawingTypes
radius_ARR[radius_ARR.length] = radius_New;
Text_ARR[Text_ARR.length] = $('#txtInput').val();
drag = false;
}
//mouse Move Event method
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY;
drawx = e.pageX - this.offsetLeft;
drawy = e.pageY - this.offsetTop;
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
if (drag = true) {
radius_New += 2;
}
draw();
if (DrawingTypes == "FreeDraw" || DrawingTypes == "Erase") {
}
else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
drawOldShapes();
}
在这里，在 MouseDown 方法调用中，我将所有点（如鼠标 X，鼠标 y 等）存储在一个全局变量中。 在 MouseUp 方法中，我将所有过去的绘图路径存储在所有绘图的数组中。 在 MouseMove 中，我将所有当前的路径点存储在变量中，并调用 draw Shapes 以绘制所选的适当图形。
JavaScript 绘制部分
//Draw all Shapes, Text and add images
function draw() {
ctx.beginPath();
Colors = document.getElementById("SelectColor").value;
ctx.fillStyle = "#" + Colors;
switch (DrawingTypes) {
case "FillRect":
ctx.rect(rect.startX, rect.startY, rect.w, rect.h);
break;
case "FillCircle":
ctx.arc(rect.startX, rect.startY, radius_New, rect.w, rect.h);
break;
case "Images":
ctx.drawImage(imageObj, rect.startX, rect.startY, rect.w, rect.h);
break;
case "DrawText":
ctx.font = '40pt Calibri';
ctx.fillText($('#txtInput').val(), rect.startX, rect.startY);
break;
case "FreeDraw":
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = "#" + Colors;
ctx.lineWidth = $('#selSize').val();
ctx.stroke();
ctx.closePath();
// ctx.beginPath();
// ctx.moveTo(drawx, drawy);
// ctx.rect(drawx, drawy, 6, 6);
// ctx.fill();
break;
case "Erase":
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);<
ctx.strokeStyle = "#FFFFFF";
ctx.lineWidth = 6;
ctx.stroke();
ctx.closePath();
// ctx.beginPath();
// ctx.moveTo(drawx, drawy);
// ctx.rect(drawx, drawy, 6, 6);
// ctx.fill();
break;
}
ctx.fill();
// ctx.stroke();
}
在 Draw 方法中，我已将 DrawingType 传递给 switch case。 如果选择的类型是矩形，我将在Canvas上绘制矩形，如果选择的类型是文本，则在canvas上绘制Text等。
步骤 3
将 Canvas 最终作品另存为图像文件。 在保存图像单击中，我调用 JavaScript 函数以使用 jQuery 保存 Canvas 图像，并在 C# 代码隐藏中，我使用 Webmethod 将 canvas 图像存储到 *root* 文件夹。
//Save as Image file
function ShanuSaveImage() {
var m = confirm("Are you sure to Save ");
if (m) {
// generate the image data
var image_NEW = document.getElementById("canvas").toDataURL("image/png");
image_NEW = image_NEW.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'Default.aspx/SaveImage',
data: '{ "imageData" : "' + image_NEW + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved to your root Folder !');
}
});
}
}
这是用于将 Canvas 图像存储到根文件夹的 Web 方法。
[WebMethod()]
public static void SaveImage(string imageData)
{
Random rnd = new Random();
String Filename = HttpContext.Current.Server.MapPath
("Shanuimg" + rnd.Next(12, 2000).ToString() + ".png");
string Pic_Path =
Filename; //HttpContext.Current.Server.MapPath("ShanuHTML5DRAWimg.png");
using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
关注点
使用 HTML5 真的很有趣。 我希望您喜欢阅读我的文章。 如果有人从我的文章中受益，我将感到高兴。 我的长期计划现在已经完成； 我终于制作了一个简单的基于 Web 的绘画工具。
如果您喜欢我的文章，请给我留言。
历史
- 2014 年 7 月 9 日：首次发布