`

Jquery_html5涂鸦

canvashtml5涂鸦 
阅读更多

<!DOCTYPE html>

 

<html>

<head>

    <title>HTML5 Canvas塗鴉板</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js">

    </script>

    <style>

        body,input { font-size: 9pt; }

        #dCanvas,#dLine { clear: both; }

        .option

        {

            float: left; width: 20px; height: 20px; border: 2px solid #cccccc;

            margin-right: 4px; margin-bottom: 4px;

        }

        .active { border: 2px solid black; }

        .lw { text-align: center; vertical-align: middle; }

        img.output { border: 1px solid green; }

        #cSketchPad { cursor: arrow; }

    </style>

    <script>

        $(function () {

            //產生不同顏色的div方格當作調色盤選項

            var colors =

            "red;orange;yellow;green;blue;indigo;purple;black;white".split(';');

            var sb = [];

            $.each(colors, function (i, v) {

                sb.push("<div class='option' style='background-color:" + v + "'></div>");

            });

            $("#dPallete").html(sb.join("\n"));

            //產生不同尺寸的方格當作線條粗細選項

            sb = [];

            for (var i = 1; i <= 9; i++)

                sb.push("<div class='option lw'>" +

         "<div style='margin-top:#px;margin-left:#px;width:%px;height:%px'></div></div>"

                .replace(/%/g, i).replace(/#/g, 10 - i / 2));

            $("#dLine").html(sb.join('\n'));

            var $clrs = $("#dPallete .option");

            var $lws = $("#dLine .option");

            //點選調色盤時切換焦點並取得顏色存入p_color，

            //同時變更線條粗細選項的方格的顏色

            $clrs.click(function () {

                $clrs.removeClass("active");

                $(this).addClass("active");

                p_color = this.style.backgroundColor;

                $lws.children("div").css("background-color", p_color);

            }).first().click();

            //點選線條粗細選項時切換焦點並取得寬度存入p_width

            $lws.click(function () {

                $lws.removeClass("active");

                $(this).addClass("active");

                p_width =

                    $(this).children("div").css("width").replace("px", "");

 

            }).eq(3).click();

            //取得canvas context

            var $canvas = $("#cSketchPad");

            var ctx = $canvas[0].getContext("2d");

            ctx.lineCap = "round";

            ctx.fillStyle = "white"; //整個canvas塗上白色背景避免PNG的透明底色效果

            ctx.fillRect(0, 0, $canvas.width(), $canvas.height());

            var drawMode = false;

            //canvas點選、移動、放開按鍵事件時進行繪圖動作

            $canvas.mousedown(function (e) {

                ctx.beginPath();

                ctx.strokeStyle = p_color;

                ctx.lineWidth = p_width;

                ctx.moveTo(e.pageX - $canvas.position().left, e.pageY - $canvas.position().top);

                drawMode = true;

            })

            .mousemove(function (e) {

                if (drawMode) {

                    ctx.lineTo(e.pageX - $canvas.position().left, e.pageY - $canvas.position().top);

                    ctx.stroke();

                }

            })

            .mouseup(function (e) {

                drawMode = false;

            });

            //利用.toDataqURL()將繪圖結果轉成圖檔

            $("#bGenImage").click(function () {

                $("#dOutput").html(

                $("<img />", { src: $canvas[0].toDataURL(),

                    "class": "output"

                }));

            });

        });

    </script>

</head>

<body>

<div id="dPallete"></div>

<div id="dLine"></div>

<div id="dCanvas">

<canvas id="cSketchPad" width="300" height="300" style="border: 2px solid gray" />

</div>

<input type="button" id="bGenImage" value="Generate Image" />

<div id="dOutput"></div>

</body>

</html>

分享到：
| ios5中使用Reachability的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics