简易绘图板

源码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /* general styles */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #bababa;
            color: #fff;
            font: 14px/1.3 Arial,sans-serif;
        }

        footer {
            background-color: #212121;
            bottom: 0;
            box-shadow: 0 -1px 2px #111111;
            display: block;
            height: 70px;
            left: 0;
            position: fixed;
            width: 100%;
            z-index: 100;
        }

            footer h2 {
                font-size: 22px;
                font-weight: normal;
                left: 50%;
                margin-left: -400px;
                padding: 22px 0;
                position: absolute;
                width: 540px;
            }

            footer a.stuts, a.stuts:visited {
                border: none;
                text-decoration: none;
                color: #fcfcfc;
                font-size: 14px;
                left: 50%;
                line-height: 31px;
                margin: 23px 0 0 110px;
                position: absolute;
                top: 0;
            }

            footer .stuts span {
                font-size: 22px;
                font-weight: bold;
                margin-left: 5px;
            }

        .container {
            color: #000;
            margin: 20px auto;
            position: relative;
            width: 730px;
        }

        /* custom styles */
        .column1 {
            float: left;
            width: 500px;
        }

        .column2 {
            float: left;
            padding-left: 20px;
            width: 170px;
        }

        #panel {
            border: 1px #000 solid;
            box-shadow: 4px 6px 6px #444444;
            cursor: crosshair;
        }

        #color {
            border: 1px #000 solid;
            box-shadow: 0px 4px 6px #444444;
            cursor: crosshair;
        }

        .column2 > div {
            margin-bottom: 10px;
        }

        #swImage {
            border: 1px #000 solid;
            box-shadow: 2px 3px 3px #444444;
            cursor: pointer;
            height: 25px;
            line-height: 25px;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }

            #swImage:hover {
                margin-left: 2px;
            }

        #preview, #pick {
            border: 1px #000 solid;
            box-shadow: 2px 3px 3px #444444;
            height: 40px;
            width: 80px;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }

        .column2 input[type=text] {
            float: right;
            width: 110px;
        }
    </style>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var canvas;
        var contextCanvas;
        var canvasColor;
        var contextColor;
        var pickColorR = 0;
        var pickColorG = 0;
        var pickColorB = 0;
        var mouseDown = false;
        $(function () {
            debugger;
            canvasColor = document.getElementById("color");
            contextColor = canvasColor.getContext("2d");
            // 绘制颜色板
            drawGradients();
            $("#color").mousemove(function (e) {
                var canvasOffset = $(canvasColor).offset();
                var canvasX = Math.floor(e.pageX - canvasOffset.left);
                var canvasY = Math.floor(e.pageY - canvasOffset.top);
                var imageData = contextColor.getImageData(canvasX, canvasY, 1, 1);
                var pixel = imageData.data;
                var pixelColor = "rgba(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + "," + pixel[3] + ")";
                $("#preview").css("backgroundColor", pixelColor);
                mouseDown = false;
            });
            // 选中颜色
            $("#color").click(function (e) {
                var canvasOffset = $(canvasColor).offset();
                var canvasX = Math.floor(e.pageX - canvasOffset.left);
                var canvasY = Math.floor(e.pageY - canvasOffset.top);
                var imageData = contextColor.getImageData(canvasX, canvasY, 1, 1);
                var pixel = imageData.data;
                var pixelColor = "rgba(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + "," + pixel[3] + ")";
                $("#pick").css("backgroundColor", pixelColor);
                pickColorR = pixel[0];
                pickColorG = pixel[1];
                pickColorB = pixel[2];
                mouseDown = false;
            });
      
            canvas = document.getElementById("panel");
            contextCanvas = canvas.getContext("2d");

            $("#panel").mousedown(function (e) {
                contextCanvas.beginPath();
                var canvasOffset = $(canvas).offset();
                contextCanvas.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
                mouseDown = true;        
            });

            $("#panel").mouseup(function (e) {
                if (mouseDown) {
                    $("#panel").mousemove(function (e) {
                        var canvasOffset = $(canvas).offset();
                        if (mouseDown) {
                            contextCanvas.strokeStyle = 'rgba(' + pickColorR + ',' + pickColorG + ',' + pickColorB + ',1)';
                            contextCanvas.lineWidth = 4;
                            contextCanvas.lineCap = "round";
                            contextCanvas.lineJoin = "round";
                            contextCanvas.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
                            contextCanvas.stroke();
                        }
                    });
                    mouseDown = false;
                }
            });
        })
        $("#panel").mousemove(function (e) {
            if (mouseDown) {
                var canvasOffset = $(canvas).offset();
                contextCanvas.strokeStyle = 'rgba(' + pickColorR + ',' + pickColorG + ',' + pickColorB + ',1)';
                contextCanvas.lineWidth = 4;
                contextCanvas.lineCap = "round";
                contextCanvas.lineJoin = "round";
                contextCanvas.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
                contextCanvas.stroke();
            }
        });
        function drawGradients() {
            var grad = contextColor.createLinearGradient(20, 0, canvasColor.width - 20, 0);
            grad.addColorStop(0, "red");
            grad.addColorStop(1 / 6, "orange");
            grad.addColorStop(2 / 6, "yellow");
            grad.addColorStop(3 / 6, "green");
            grad.addColorStop(4 / 6, "aqua");
            grad.addColorStop(5 / 6, "blue");
            grad.addColorStop(1, "purple");
            contextColor.fillStyle = grad;
            contextColor.fillRect(0, 0, canvasColor.width, canvasColor.height);
        }
   
    </script>
</head>
<body>
    <div class="container">
        <div class="column1">
            <canvas id="color" width="500" height="128"></canvas>
            <canvas id="panel" width="500" height="333"></canvas>
        </div>
        <div class="column2">
            <div>Preview:</div>
            <div id="preview"></div>
            <div>Selected:</div>
            <div id="pick"></div>
            <div>Color:</div>
            <div>
                RGB:
                <input type="text" id="rgbVal" />
            </div>
            <hr />
        </div>
        <div style="clear: both;"></div>
    </div>
    <footer>
        <h2>HTML5 canvas - Creating own Paint program</h2>
    </footer>
</body>
</html>
Chrome下有问题！
posted @ 2012-11-23 08:36 bradleydan 阅读(111) 评论(0) 收藏举报
刷新页面返回顶部
bradleydan

简易绘图板

公告
