HTML5响应式canvas：调整浏览器canvas大小消失

我希望使用百分比大小制作响应式canvas，一旦用户调整canvas大小相对resize。 我能够通过使用下面的代码来缩放canvas，但唯一的问题是当缩放窗口大小鼠标绘图消失时。

 body{margin:0px;padding:0px;background:#a9a9a9;} #main{ display:block; width:80%; padding:50px 10%; height:300px; } canvas{display:block;background:#fff;}    
    
  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(); });  

谢谢。

Answer 1

调整canvas大小时处理内容

如果调整canvas大小，则始终会删除绘制的内容。 这就是canvas的行为方式。

您可以在resize后重绘内容，也可以将内容保存为图像数据，并在resize后恢复（请参阅canvas.toDataURL）。

这是代码和小提琴： http ： //jsfiddle.net/m1erickson/V6SVz/

           Click to resize the canvas
    

Answer 2

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

上面的代码相当于clearRect ，它用于清除canvas。如果你想保留之前绘制的内容，你就无法调整宽度和高度。 作为解决方案，您可以创建具有所需宽度的新canvas，并使用drawImage(c)绘制先前canvas的内容drawImage(c) c是canvas对象。然后您必须删除canvas

Answer 3

我也遇到了你在mu应用程序中面临的同样问题，在阅读完之后我得出了这个结论，即canvas元素的行为是这样的，它在重新resize后会自行清除，唯一的解决方法是添加窗口重新resize事件的监听器，并在事件触发时重绘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); } 

希望能帮助到你。

资源

Answer 4

谢谢。 这真的很有帮助。 下面是我试图做的代码。

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

Answer 5

我创建了一个jQuery插件来处理HTML5canvas大小调整。 它旨在弥合移动和桌面用户之间的差距。 它仍然是WIP，但它是可扩展的，并且内置了一些基本的绘图function。

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

Answer 6

我用这个方法：

 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); } 

Answer 7

我有同样的问题。 我的解决方案是使用CSS3的属性缩放到canvas的父容器：

coef – 从父级边框制作canvas缩进的系数。 你可以把它归零。

我希望它对某人有帮助:-)