Question

我想要画些画布标签，当我放入div时不起作用。我从github上获取了这段代码。它在div中不起作用。 github url => https://github.com/GeekLaunch/simple-drawing-web-app

我该怎么做？实际上我不知道画布库。但这对我来说足够了。在我的项目中，我使用Bootstrap CSS库。

var canvas, ctx,
    brush = {
        x: 0,
        y: 0,
        color: '#000000',
        size: 10,
        down: false,
    },
    strokes = [],
    currentStroke = null;

function redraw() {
    ctx.clearRect(0, 0, canvas.width(), canvas.height());
    ctx.lineCap = 'round';
    for (var i = 0; i < strokes.length; i++) {
        var s = strokes[i];
        ctx.strokeStyle = s.color;
        ctx.lineWidth = s.size;
        ctx.beginPath();
        ctx.moveTo(s.points[0].x, s.points[0].y);
        for (var j = 0; j < s.points.length; j++) {
            var p = s.points[j];
            ctx.lineTo(p.x, p.y);
        }
        ctx.stroke();
    }
}

function init() {
    canvas = $('#draw');
    ctx = canvas[0].getContext('2d');

    function mouseEvent(e) {
        brush.x = e.pageX;
        brush.y = e.pageY;

        currentStroke.points.push({
            x: brush.x,
            y: brush.y,
        });

        redraw();
    }

    canvas.mousedown(function (e) {
        brush.down = true;

        currentStroke = {
            color: brush.color,
            size: brush.size,
            points: [],
        };

        strokes.push(currentStroke);

        mouseEvent(e);
    }).mouseup(function (e) {
        brush.down = false;

        mouseEvent(e);

        currentStroke = null;
    }).mousemove(function (e) {
        if (brush.down)
            mouseEvent(e);
    });

    $('#save-btn').click(function () {
        window.open(canvas[0].toDataURL());
    });

    $('#undo-btn').click(function () {
        strokes.pop();
        redraw();
    });

    $('#clear-btn').click(function () {
        strokes = [];
        redraw();
    });

    $('#color-picker').on('input', function () {
        brush.color = this.value;
    });

    $('#brush-size').on('input', function () {
        brush.size = this.value;
    });
}

$(init);

body {
    margin: 0;
}

.top-bar {
    display: flex;
    flex-direction: row;
    background-color: #3af;
    border-bottom: 2px solid black;
    position: absolute;
    width: 100%;
}

.top-bar * {
    margin: 5px 10px;
}

#draw {
    display: block;
}

:<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-bar">
    <button id="save-btn">Save</button>
    <button id="undo-btn">Undo</button>
    <button id="clear-btn">Clear</button>
    <input type="color" id="color-picker"></input>
    <input type="range" id="brush-size" min="1" nax="50" value="10"></input>
</div>
<div style="border:1px solid red;width:500px;height:500px;margin:auto;">
<canvas id="draw" style="border:1px solid red;"></canvas>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="draw.js"></script>
</body>
</html>

Answer 1

根据我的观察，保存按钮在chrome上不起作用。由于Google Chrome浏览器显然已取消了对顶框导航的支持，因此您可以在此处查看更多信息：https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

您可以尝试将画布数据渲染到iFrame。

将以下函数添加到您的draw.js文件中：

function debugBase64(base64URL){
  var win = window.open();
  win.document.write('<iframe src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}

现在在发生点击事件时运行该功能。

$('#save-btn').click(function () {
    debugBase64(canvas[0].toDataURL());
});

希望它能起作用！

画布-当我在div中放入<canvas>时不起作用

1 个答案: