• Canvas现实画板功能


      先看图片

      

    HTML

      

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script src="../src/lib/require.js"></script>
            <style>
                input{
                    width: 50px;
                    border: none;
                    text-align: center;
                }
                input[type=range]{
                    width: 200px;
                }
                label{
                    margin-left: 10px;
                }
                input,label{
                    vertical-align: middle;
                }
                canvas{
                    cursor: default;
                }
            </style>
        </head>
        <body>
            <div class="m10">
                <canvas id="canvas"></canvas>
                <p><input type="range" name="" id="num" min=0 max=10 value=2><label for="num">线条大小</label><input type="color" name="" id="color"><label for="color">线条颜色</label></p>
            </div>
            
            <script>
                requirejs(['../src/canvas'], function() {});
            </script>
        </body>
    </html>

      Javascript

      

    define([], function() {
        var getId = function(id) {
            return typeof id === 'string' ? document.getElementById(id) : id;
        };
    
        function getPosition(o) {
            if (!(o && o.nodeName)) {
                return {
                    left: 0,
                    top: 0
                };
            }
            var t = parseInt(o.offsetTop, 10),
                l = parseInt(o.offsetLeft, 10);
            while (o.offsetParent) {
                o = o.offsetParent;
                t += o.offsetTop;
                l += o.offsetLeft;
            }
            return {
                left: l,
                top: t
            };
        }
        var canvas = getId('canvas'),
            ct = canvas.getContext('2d'),
            w = canvas.width = 600,
            h = canvas.height = 400;
        var bgl = ct.createRadialGradient(400, 0, 0, 400, 0, 400);
        bgl.addColorStop(0, 'red');
        bgl.addColorStop(1, 'green');
        ct.beginPath();
    
        function draw(ev) {
            console.log(getPosition(canvas));
            var x = ev.clientX - getPosition(canvas).left;
            var y = ev.clientY - getPosition(canvas).top;
            ct.lineTo(x, y);
            ct.stroke();
            console.log(x + '--' + y);
        }
        canvas.onmousedown = function(ev) {
            var x = ev.clientX - getPosition(canvas).left;
            var y = ev.clientY - getPosition(canvas).top;
            var size = getId('num').value;
            var color = getId('color').value;
            ct.save();
            ct.strokeStyle = color;
            ct.lineWidth = size;
            ct.beginPath();
            canvas.onmousemove = draw;
        };
        document.onmouseup = function(ev) {
            canvas.onmousemove = null;
            ct.closePath();
            //ct.fill();
            ct.restore();
        };
    });

      

  • 相关阅读:
    [转]Torch是什么?
    去掉 CONSOLE 窗口(转)
    最短路径问题
    最短路,dijstra算法
    最短路,floyd算法,图的最短路径
    freckles
    还是畅通工程,最小生成树kruskal
    More is better
    畅通工程
    人见人爱
  • 原文地址:https://www.cnblogs.com/kingwell/p/4076222.html
Copyright © 2020-2023  润新知