您的位置：首页 > Web前端 > HTML5

HTML5学习-使用 Canvas 来创建绘图应用程序

2014-03-17 15:41 597 查看
原文地址：http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ 根据原文尝试了一下，很好的HTML5入门；
<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var coloringCanvas = $("#coloringBook");
                var context = document.getElementById("coloringBook").getContext("2d");
                var clickX = new Array();
                var clickY = new Array();
                var clickDrag = new Array();
                var paint;

                var colorPurple = "#cb3594";
                var colorGreen = "#659b41";
                var colorYellow = "#ffcf33";
                var colorBrown = "#986928";

                var curColor = colorPurple;//current use color
                var clickColor = new Array();
                
                var sizeSmall = 3;
                var sizeNormal = 5;
                var sizeLarge = 10;
                var sizeHuge = 20;
                var curSize = sizeNormal;
                var clickSize = new Array();
                
                var toolCrayon = "Crayon";//蜡笔
                var toolMarker = "Marker";//记号笔
                var toolEraser = "Eraser";//橡皮
                var curTool = toolMarker;
                
                

                var canvasWidth = context.canvas.width;
                var canvasHeight = context.canvas.height;

                function addClick(x, y, dragging)
                {
                    clickX.push(x);
                    clickY.push(y);
                    clickDrag.push(dragging);
                    if(curTool == toolEraser){//如果为橡皮工具
                        clickColor.push("white");//颜色设置白色
                    }else{
                        clickColor.push(curColor);
                    }
                    
                    clickSize.push(curSize);
                }
                function redraw(){
                    context.clearRect(0, 0, canvasWidth, canvasHeight); // Clears the canvas
  
                    context.lineJoin = "round";
                    
			
                    for(var i=0; i < clickX.length; i++) {		
                        context.beginPath();
                        if(clickDrag[i] && i){
                            context.moveTo(clickX[i-1], clickY[i-1]);
                        }else{
                            context.moveTo(clickX[i]-1, clickY[i]);
                        }
                        context.lineTo(clickX[i], clickY[i]);
                        context.closePath();
                        context.strokeStyle = clickColor[i];//画笔颜色
                        context.lineWidth = clickSize[i];//画笔大小
                        context.stroke();
                    }
                    //蜡笔工具处理
                    if(curTool == toolCrayon){
                        context.globalAlpha = 0.4;
                        context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
                    }
                    context.globalAlpha = 1;
                    
                }
                coloringCanvas.mousedown(function(e){
                    var mouseX = e.pageX - this.offsetLeft;
                    var mouseY = e.pageY - this.offsetTop;
		
                    paint = true;
                    addClick(mouseX, mouseY);
                    redraw();
                });
                coloringCanvas.mousemove(function(e){
                    if(paint){
                        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                        redraw();
                    }
                });
                coloringCanvas.mouseup(function(e){
                    paint = false;
                });
                coloringCanvas.mouseleave(function(e){
                    paint = false;
                });
                
                //clear the canvas
                $("#clearBtn").click(function(e){
                    //清空画布
                    context.clearRect(0, 0, canvasWidth, canvasHeight); // Clears the canvas
                    //清空绘画信息数组
                    clickX = [];
                    clickY = [];
                    clickDrag = []; 
                    clickColor = [];
                    clickSize = [];
                    
                });
                //choose a color
                $("#colorPurpleBtn").click(function(e){
                    curColor = colorPurple;
                });
                $("#colorGreenBtn").click(function(e){
                    curColor = colorGreen;
                });
                $("#colorYellowBtn").click(function(e){
                    curColor = colorYellow;
                });
                $("#colorBrownBtn").click(function(e){
                    curColor = colorBrown;
                });
                //choose a size
                $("#sizeSmallBtn").click(function(e){
                    curSize = sizeSmall;
                });
                $("#sizeNormalBtn").click(function(e){
                    curSize = sizeNormal;
                });
                $("#sizeLargeBtn").click(function(e){
                    curSize = sizeLarge;
                });
                $("#sizeHugeBtn").click(function(e){
                    curSize = sizeHuge;
                });
                //choose a tool
                $("#toolCrayonBtn").click(function(e){
                    curTool = toolCrayon;
                });
                $("#toolMarkerBtn").click(function(e){
                    curTool = toolMarker;
                });
                $("#toolEraserBtn").click(function(e){
                    curTool = toolEraser;
                });
                
            });
            
        </script>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        clear the canvas:<input id ="clearBtn" type="button" value="clear">
        <br>
        choose a color:
        <input id ="colorPurpleBtn" type="button" value="Purple">
        <input id ="colorGreenBtn" type="button" value="Green">
        <input id ="colorYellowBtn" type="button" value="Yellow">
        <input id ="colorBrownBtn" type="button" value="Brown">
        <br>
        choose a size:
        <input id ="sizeSmallBtn" type="button" value="Small">
        <input id ="sizeNormalBtn" type="button" value="Normal">
        <input id ="sizeLargeBtn" type="button" value="Large">
        <input id ="sizeHugeBtn" type="button" value="Huge">
        <br>
        choose a tool:
        <input id ="toolCrayonBtn" type="button" value="Crayon">
        <input id ="toolMarkerBtn" type="button" value="Marker">
        <input id ="toolEraserBtn" type="button" value="Eraser">
        <br>
        <canvas id="coloringBook" width="500" height="400" style="border: 1px solid grey">

        </canvas>

    </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航