ASP.NET Web HTML 5 绘画工具_HTML5网页画图实例
2014-07-12 13:21:21 By: dwtedx
介绍
很长一段时间，我一直计划开发一个基于Web的绘画工具。我已经开发出一种绘画工具为Windows应用程序。
但使用ASP.NET我觉得它更难以发展基于网络的绘画工具。最后使用HTML5画布我已经开发了一个简单的基于Web的绘画工具。
HTML5使我的工作变得更加容易。有兴趣的学习HTML5。
现在，让我们来看看一个基于HTML5的Canvas。那么，什么是HTML5的Canvas？ HTML5的Canvas是绘制图形的Web页面上的元素。
在一个简单的方法，我们可以说一个Canvas是一个矩形容器在网页中，我们可以绘制图形。
要创建我们已经使用了HTML5 Canvas元素与JavaScript的一个基于Web的绘画工具。我们可以看到，在代码的细节。
现在让我们看看一些基本的需要了解HTML5和canvas标签。HTML5：HTML5是HTML的新版本。 HTML5具有跨平台的支持，这意味着HTML5可以在一台PC的工作，平板电脑和智能手机。
HTML5应该开始一个DOCTYPE的例子。
第一步添加 html5 canvas 标签
<!DOCTYPE html> <html> <body> <canvas></canvas> </body> </html> 有关HTML5和canvas标签的使用详情请参考谷歌。有很多HTML5中有趣的东西需要我们学习
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 defult to test for the draging
drag = false;
// Array to store all the old Shanpes 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容器内。
第2步：绘制和填充矩形上使用JavaScript Canvas容器。我已经使用颜色选择器默认情况下选中的颜色将被用于绘制用户可以选择不同的颜色。
<img src="images/rect.png" /> <img src="images/Circle.png" /> <img src="images/Font.png" /> <img src="images/Pencil.png" /> <img src="images/Image.png" /> 我已经把图像绘制矩形，圆，文字等。如果用户需要利用圆形图像圈点击然后绘制Canvas容器。
在图片请点击我的JavaScript调用init方法，并通过绘图类型为圆形，矩形等。
在我们已经创建了画布上鼠标事件一样的MouseDown，MouseMove事件和MouseUp Init方法。下面是鼠标事件的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我存储所有过去的阵列中绘制路径的所有drawings.In的MouseMove我所有的当前路径点存储在变量和调用绘制形状绘制所选择适当的图纸。
JavaScript的部分绘制
//Darw all Shaps,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切换case.If选择的类型是矩形，我将绘制矩形的画布，如果选择的类型是text文本绘制在帆布等。
第3步：保存画布最后的工作作为图像file.In保存图像点击我调用javascript函数使用jQuery和C＃代码后面使用WEBMETHOD到画布上的图像存储到根文件夹中保存的画布图像。
相关文章
精彩导读
热门资讯
关注我们
