HTML通过canvas实现简单的画图功能

功能描述：
有红绿蓝三种颜色的画笔，可以选择画笔的粗细，画出的图可以保存到右边的六个画框中。当右边的六个画框都画满之后，便不能继续保存来了。可以清除画框，清除画布。保存的图片可以右击保存为png格式。
实现效果如图所示：
这里写图片描述
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var bot;//画布div
        var X,Y,X1,Y1;//坐标
        var flag=0;
        var time;//定时器ID
        var color=0;//记住所选颜色
        var lineW=2;//画笔粗细
        var canvas;//创建画布
        var context;//获取上下文
        var isMouseDown=false;//记录鼠标是否按下

        window.onload=function(){
            //创建画布
            canvas=document.getElementById("can");
            //获取上下文
            context=canvas.getContext("2d");
            bot=document.getElementById("bottom");
            bot.onmousedown=mouseDownAction;
            bot.onmousemove=mouseMoveAction;
            document.onmouseup=mouseUpAction;
        }

        /**
         *选中画笔颜色
         */
        function pen_click(num){
            var chk=document.getElementsByTagName("input");
            for(var i=0;i<chk.length;i++){
                if(i==num){
                    chk[i].checked=true;
                    color=i;
                }else {
                    chk[i].checked="";
                }
            }
        }

        /**
         * 画笔粗细
         */
        function line_wid(num){
            lineW=num;
        }

        /**
         *鼠标按下
         */
        function mouseDownAction(e){
            isMouseDown=true;
            //记录下鼠标点击的时候的位置
            X= e.offsetX;
            Y= e.offsetY;
        }

        /**
         *鼠标移动
         */
        function mouseMoveAction(e){
            if(isMouseDown){
                X1= e.offsetX;
                Y1= e.offsetY;
                drowline(X,Y,X1,Y1);
                flag++;
            }
        }

        /**
         *鼠标弹起来
         */
        function mouseUpAction(e){
            isMouseDown=false;
            flag=0;
        }

        /**
         * 绘制
         */
        function drowline(num1,num2,num3,num4){
            //开启新的路径
            if(flag)
                context.beginPath();
            //移动画笔的初始位置
            context.moveTo(num1,num2);
            context.lineWidth=lineW;
            if(color==0){
                context.strokeStyle="red";
            }else if(color==1){
                context.strokeStyle="green";
            }else if(color==2){
                context.strokeStyle="blue";
            }
            //移动画笔的结束位置
            context.lineTo(num3,num4);
            //开始绘制
            context.stroke();

            if(flag!=0){
                X=X1;
                Y=Y1;
            }
        }

        function save_pic(){//保存画图
            var div=document.getElementsByClassName("div");
            if(div[div.length-1].innerHTML!=""){
                alert("存储空间已满，无法保存，请清除空间！")
            }
            var str=canvas.toDataURL("image/png",0.92);
            for(var i=0;i<div.length;i++){
                if(div[i].innerHTML==""){
                    var s="<img src='"+str+"' style='width: 250px;height: 250px;'>";
                    div[i].innerHTML=s;
                    break;
                }
            }
        }

        function clear_pic(){//清除画布
            context.clearRect(0,0,500,500);
        }

        function clear_save(){//清除保存
            var div=document.getElementsByClassName("div");
            for(var i=0;i<div.length;i++){
                div[i].innerHTML="";
            }
        }
    </script>
</head>
<body>
<div id="left">
    <div id="top">
        <div class="top_left"><!-- 画笔颜色选择 -->
            <img src="img/pen_red.gif" style="border: 2px solid transparent" onclick="pen_click(0)"><input type="checkbox" style="position: absolute;top: 38px;left: 88px" checked onclick="pen_click(0)">
            <img src="img/pen_green.gif" style="border: 2px solid transparent" onclick="pen_click(1)"><input type="checkbox" style="position: absolute;top: 38px;left: 145px" onclick="pen_click(1)">
            <img src="img/pen_blue.gif" style="border: 2px solid transparent" onclick="pen_click(2)"><input type="checkbox" style="position: absolute;top: 38px;left: 202px" onclick="pen_click(2)">
        </div>
        <div class="top_right"><!-- 画笔粗细选择 -->
            <img src="img/pen_thin.gif" onclick="line_wid(2)">
            <img src="img/pen_medium.gif" onclick="line_wid(4)">&nbsp;&nbsp;&nbsp;
            <img src="img/pen_thick.gif" onclick="line_wid(8)">
        </div>
    </div>
    <div id="bottom"><!-- 画板 -->
        <canvas id="can" width="500" height="500"></canvas>
    </div>
</div>
<div id="right">
    <div id="div1" class="div"></div>
    <div id="div2" class="div"></div>
    <div id="div3" class="div"></div>
    <div id="div4" class="div"></div>
    <div id="div5" class="div"></div>
    <div id="div6" class="div"></div>
</div>
<div class="bottom">
    <hr>
    <input type="button" value="保存图片" style="position: absolute;top: 560px;left: 0px" onclick="save_pic()">
    <input type="button" value="清除画布" style="position: absolute;top: 560px;left: 66px"onclick="clear_pic()">
    <input type="button" value="清除保存" style="position: absolute;top: 560px;left: 132px"onclick="clear_save()">
</div>
</body>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #left{
        width: 500px;
        height: 550px;
        float: left;
    }
    .top_left{
        margin-left: 50px;
        float: left;
    }
    .top_right{
        margin-right: 50px;
        float: right;
    }
    #bottom{
        width: 500px;
        height: 500px;
        border: solid 2px coral;
        float: left;
    }
    #right{
        width: 826px;
        height: 550px;
        border: solid 2px red;
        float: right;
    }
    .div{
        width: 250px;
        height: 250px;
        border: solid 2px orange;
        margin: 15px 0 0 15px;
        float: left;
    }
</style>
</html>
HTML通过canvas实现简单的画图功能

猜你喜欢
