帆布-當我放 <canvas> 在div中不起作用

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(px, py); } 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());
});

希望它有效！

帆布-當我放 <canvas> 在div中不起作用

問題描述

1 個解決方案

解決方案1
1 2018-08-26 12:21:20

帆布-當我放 <canvas> 在div中不起作用

問題描述

1 個解決方案

解決方案1 1 2018-08-26 12:21:20

解決方案1
1 2018-08-26 12:21:20