帆布-当我放 <canvas> 在div中不起作用
[英]Canvas - When i put <canvas> in div does not work
问题描述
I want a draw something canvas tag , when i put in div it doesnt work. 
我想要画点画布标签，当我放入div时不起作用。 I taked this code from github. 我从github上获取了这段代码。 it isnot working within div. 它在div中不起作用。 github url => https://github.com/GeekLaunch/simple-drawing-web-app github url => https://github.com/GeekLaunch/simple-drawing-web-app
how can i do this ? 我怎样才能做到这一点 ？ actually i dont know canvas library. 实际上我不知道画布库。 but this codes enough for me. 但这对我来说足够了。 In my project i use bootstrap css library. 在我的项目中，我使用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>
1 个解决方案
解决方案1
1 2018-08-26 12:21:20
From my observation, the save button is not working on chrome. 根据我的观察，保存按钮在chrome上不起作用。 Because apparently Google Chrome has removed support for top-frame navigation, you can see more informations here: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM 由于Google Chrome显然已取消了对顶部导航的支持，因此您可以在此处查看更多信息： https : //groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM
You may try to render the canvas data to an iFrame. 您可以尝试将画布数据渲染到iFrame。
Add below function to your draw.js file: 将以下函数添加到您的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>');
}
Now run the function when click event occurred. 现在，在发生点击事件时运行该功能。
$('#save-btn').click(function () {
debugBase64(canvas[0].toDataURL());
});
Hope it works ! 希望它有效！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.