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 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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+