码迷,mamicode.com
首页 > Web开发 > 详细

HTML5入门十一---Canvas画布实现画图(二)

时间:2015-12-23 15:49:12      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

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

 

HTML5入门十一---Canvas画布实现画图(二)

标签:

原文地址:http://www.cnblogs.com/litao0505/p/5069851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!