HTML5 отзывчивый холст: изменение размера холста рисования браузера исчезает

Я хочу сделать отзывчивый холст, используя размер в процентах, и как только пользователь изменит размер окна, отрегулируйте его. Я могу масштабировать холст, используя нижеприведенный код, но единственная проблема заключается в том, что я масштабирую размер окна, и рисунок мыши исчезает.HTML5 отзывчивый холст: изменение размера холста рисования браузера исчезает

<style> 
body{margin:0px;padding:0px;background:#a9a9a9;} 
#main{ 
display:block; 
width:80%; 
padding:50px 10%; 
height:300px; 
} 
canvas{display:block;background:#fff;} 
</style> 
</head> 
<body> 
<div id="main" role="main"> 
<canvas id="paint" width="100" height="100"> 
< !-- Provide fallback --> 
</canvas> 
</div> 

<script> 

var c = document.getElementById('paint'); 
var ctx = c.getContext('2d'); 
var x = null; 
var y; 

c.onmousedown = function(e){ 
x = e.pageX - c.offsetLeft; 
y = e.pageY - c.offsetTop; 
ctx.beginPath(); 
ctx.moveTo(x,y); 

} 

c.onmouseup = function(e){ 
x=null; 

} 


c.onmousemove = function(e){ 
if(x==null) return; 
x = e.pageX - c.offsetLeft; 
y = e.pageY - c.offsetTop; 
ctx.lineTo(x,y); 
ctx.stroke(); 

} 

$(document).ready(function(){ 
//Get the canvas & 
var c = $('#paint'); 

var container = $(c).parent(); 

//Run function when browser resizes 
$(window).resize(respondCanvas); 

function respondCanvas(){ 
    c.attr('width', $(container).width()); //max width 
    c.attr('height', $(container).height()); //max height 

    //Call a function to redraw other content (texts, images etc) 
} 

//Initial call 
respondCanvas(); 

}); 


</script>

Спасибо.

источник

2013-04-08 iawara

Похоже дубликата HTTP: // StackOverflow.com/questions/5517783/prevent-canvas-clear-when-resizing-window –

используйте эту библиотеку и нарисуйте экран на каждом кадре: http://georgealways.github.io/gee/ – Saturnix

взгляните на это: http : //stackoverflow.com/a/23128583/1265753 – karaxuna

c.attr('width', $(container).width()); //max width 
c.attr('height', $(container).height()); //max height

выше код эквивалентен clearRect, который используется, чтобы очистить холст .so вы не можете изменять ширину и высоту, если вы хотите, чтобы сохранить то, что было обращено ранее. в качестве решения вы можете создать новый холст с требуемой шириной и рисовать содержание предыдущего холста с помощью drawImage(c) с есть объект холста .then вы должны удалить холст

источник

2013-04-08 11:56:16

Спасибо. Итак, есть ли возможность сначала сохранить рисунок холста, а затем установить c.attr() .. или любым другим способом установить динамическую чувствительную ширину/высоту на холст. – iawara

Работы с содержимым при изменении размера холста

Если вы изменяете размер холста, рисованное содержимое всегда стирается. Вот как ведет себя холст.

Вы можете либо перерисовать содержимое после изменения размера, либо сохранить содержимое как данные изображения и восстановить после изменения размера (см. Canvas.toDataURL).

Вот код и Fiddle: http://jsfiddle.net/m1erickson/V6SVz/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:10px; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // draw some content 
    ctx.lineWidth=3; 
    ctx.fillStyle="blue"; 
    ctx.strokeStyle="red"; 
    ctx.rect(50,50,100,50); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.font="14px Verdana"; 
    ctx.fillStyle="white"; 
    ctx.fillText("Scale Me",65,75); 

    function saveResizeAndRedisplay(scaleFactor){ 

     // save the canvas content as imageURL 
     var data=canvas.toDataURL(); 

     // resize the canvas 
     canvas.width*=scaleFactor; 
     canvas.height*=scaleFactor; 

     // scale and redraw the canvas content 
     var img=new Image(); 
     img.onload=function(){ 
      ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height); 
     } 
     img.src=data; 

    } 

    $("#resizer").click(function(){ saveResizeAndRedisplay(1.5); }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="resizer">Click to resize the canvas</button><br/> 
    <canvas id="canvas" width=200 height=150></canvas> 
</body> 
</html>

источник

2013-04-08 14:37:05 markE

Спасибо. это было действительно полезно. ниже - код, который я пытался сделать.

#main{ 
display:block; 
width:80%; 
height:300px; 
background:#e0e0e0; 
} 
canvas{display:block;background:#fff;border:1px solid red;} 

</style> 

<script> 

$(function(){ 

var container=document.getElementById("main"); 
var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 

// draw some content 
//alert(canvas.width); 

var w=$(container).width(); 
var h=$(container).height(); 



$(window).resize(saveResizeAndRedisplay); 
function saveResizeAndRedisplay(){ 

    // save the canvas content as imageURL 
    var data=canvas.toDataURL(); 

    // resize the canvas 
    canvas.width = $(container).width(); 
    canvas.height = $(container).height(); 
    //alert($(container).width()); 

    // scale and redraw the canvas content 
    var img=new Image(); 
    img.onload=function(){ 
     ctx.drawImage(img,0,0,img.width,img.height); 
    } 
    img.src=data; 

} 

saveResizeAndRedisplay(); 

}); 
</script> 

</head> 

<body> 

<div id="main" role="main"> 
<canvas id="canvas" width=200 height=150></canvas> 
</div> 

<script> 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var x = null; 
var y; 

canvas.onmousedown = function(e){ 
x = e.pageX - canvas.offsetLeft; 
y = e.pageY - canvas.offsetTop; 
ctx.beginPath(); 
ctx.moveTo(x,y); 
} 

canvas.onmouseup = function(e){ 
x=null; 
} 


canvas.onmousemove = function(e){ 
if(x==null) return; 
x = e.pageX - canvas.offsetLeft; 
y = e.pageY - canvas.offsetTop; 
ctx.lineTo(x,y); 
ctx.stroke(); 
} 
</script>

источник

2013-04-09 06:49:42 iawara

Я создал плагин JQuery, который обрабатывает HTML5 холст изменение размеров. Он был создан для преодоления разрыва между мобильными и настольными пользователями. Это еще WIP, но она является расширяемой, и имеют некоторые базовые функции рисования, встроенные в.

http://trsanders.github.io/responsive-sketchpad/

источник

2013-04-25 23:16:55 tsanders

Я также имел тот же вопрос, что ваши сталкиваются в приложении мю, и после прочтения об этом я пришел этот вывод о том, что поведение элемента canvas таково, что он очищается после повторной калибровки, единственным решением для этого является добавление слушателя для события изменения размера окна и перерисовка холста при запуске события.

$(window).resize(function(e) { 
// function to redraw on the canvas 
}); 



$(document).ready(function(e){ 
    var c = $('#example'); // getting the canvas element 
    var ct = c.get(0).getContext('2d'); 
    var container = $(c).parent(); 
    $(window).resize(respondCanvas); //handling the canvas resize 
    function respondCanvas(){ 
     // makign the canvas fill its container 
     c.attr('width', $(container).width()); //max width 
     c.attr('height', ($(container).height() -20)); //max height 
    } 
    respondCanvas(); 
    make_image('images/india.png',1,1); 
}

Надеюсь, это поможет.

Source

источник

2013-04-26 04:03:34

Просьба указать источник при копировании кода с веб-сайта. – akshaynagpal

Я использую этот метод:

var context = document.getElementById('paint').getContext('2d'); 
var canvas = context.canvas; 

function responsive(width){ 
    var p = width/canvas.width; 
    canvas.width *= p; 
    canvas.height *= p; 

    var scaleFactor = context.scaleFactor || 1; 
    context.scale(p * scaleFactor, p * scaleFactor); 
    context.scaleFactor = p * scaleFactor; 
} 

var mq = window.matchMedia("(min-width: 735px)"); 
mq.addListener(applyChanges); 
applyChanges(); 

function applyChanges(){ 
    if(!mq) 
     responsive(350); 
    else 
     responsive(735); 
}

источник

2014-04-17 08:48:57 karaxuna

Я была такая же проблема. Мое решение использует свойство масштабирования CSS3 для контейнера родителя холста:

<div id="parent_div"> 
    <div id="constructor_div"> 
     <canvas width="600" height="900"> 
    </div> 
</div> 

<script> 
    constructor_zoom(); 

    $(window).resize(function() { 
     constructor_zoom(); 
    }); 

    function constructor_zoom() 
    { 
     var parent_width = $('#parent_div').width(); 
     var item_width = $('#constructor_div').width(); 
     var coef = 0.1; 

     $('.constructor_image').css('zoom', parent_width/item_width - coef); 
    } 
</script>

коэф - коэффициент, чтобы сделать отступы холст от границ родителя. Вы можете сделать его равным нулю.

Я надеюсь, что это помогает кому-то :-)

источник

2017-03-31 07:29:21

HTML5 отзывчивый холст: изменение размера холста рисования браузера исчезает

ответ

Смежные вопросы