HTML5入门十一---Canvas画布实现画图（二）

时间：2022-11-05 20:58:51
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            canvas{

                border: 1px dashed black;

            }

            .btnStyle{

            }

        </style>

        <script>

            var penColor = "red";

            var penSize = "";

             var mouseX;//鼠标x位置

             var mouseY;//鼠标y位置

             var obj;

            function getPen(string){

                if(string == '1')

                        penColor = "red";

                else if(string == '2')

                        penColor = "blue";

                else if(string == '3')

                        penColor = "green";

            }

            function getPoint(string){

                if(string == '4')

                    penSize = 3;

                else if(string == '5')

                    penSize = 6;

                else if(string == '6')

                    penSize = 8;

            }

            function draw()

            {

                obj = document.getElementById("myCanvas")

                var context = obj.getContext("2d");

                context.lineWidth = penSize;

                context.beginPath();

                context.moveTo(mouseX,mouseY);

                 mouseX = event.clientX;//鼠标x位置

                 mouseY = event.clientY;//鼠标y位置

                 //alert(mouseX);

                 //alert(mouseY);

                 context.strokeStyle = penColor;

                context.lineCap = "round";

                 context.fillStyle = "blanchedalmond";

                context.fill();

                context.lineTo(mouseX,mouseY);

                //context.lineTo(10,10);

                context.closePath();

                context.stroke();

            }

            function updatePos()

            {

                mouseX = event.clientX;//鼠标x位置

                 mouseY = event.clientY;//鼠标y位置

            }

        </script>

    </head>

    <body>

        <div>

            <form name="mypaint">

            <table align="center" border=0 cellspacing="0" width="800px" height="400px" cellpadding="0">

                <tr align="center">

                    <td><input onclick="getPen('1')" id="redPen" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_red.gif) no-repeat;"/></td>

                    <td rowspan=7>

                            <canvas id="myCanvas" onmousedown="draw()" onmouseup="updatePos()" width="600px" height="400px">

                            </canvas>

                    </td></tr>

                <tr align="center"><td><input onclick="getPen('2')" id="bluePen" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_blue.gif) no-repeat;"/></td></tr>

                <tr align="center"><td><input onclick="getPen('3')" id="greenPen" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_green.gif) no-repeat;"/></td></tr>

                <tr align="center"><td><input onclick="getPoint('4')" id="thinPoint" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_thin.gif) no-repeat;"/></td></tr>

                <tr align="center"><td><input onclick="getPoint('5')" id="mediumPoint" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_medium.gif) no-repeat;"/></td></tr>

                <tr align="center"><td><input onclick="getPoint('6')" id="thickPoint" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_thick.gif) no-repeat;"/></td></tr>

                <tr align="center"><td><input onclick="clear()" id="thickPoint" type="button" value="保存" />

                    <input onclick="clear()" id="thickPoint" type="button" value="清空" />

                </td></tr>

            </table>

        </form>

        </div>

    </body>

</html>

相关文章