欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  技术分享

ASP.NET Web HTML 5 绘画工具_HTML5网页画图实例

程序员文章站 2022-03-01 16:18:32
...

介绍

很长一段时间，我一直计划开发一个基于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 id="canvas" width="400" height="400"></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"  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方法，并通过绘图类型为圆形，矩形等。

在我们已经创建了画布上鼠标事件一样的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到画布上的图像存储到根文件夹中保存的画布图像。 

//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 !´);
                  }
              });
          }      
    }
这是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工作是很有趣。我希望你喜欢读我的文章。我会很高兴。

源码下载链接: http://dwtedx.com/download.html?bdkey=s/1hqDY0Pe 密码: fgwa

上一篇： Windows10正式版免密匙激活方法_Win10专业版一键永久KMS激活工具下载

下一篇： 使用Ajax验证Knockout_Knockout验证

推荐阅读