Responsives Canvas-Element

Question

Ich habe eine reaktionsfähige Leinwand erstellt, aber es fällt mir schwer herauszufinden, wie man ein Rechteckelement in der Leinwand auch reagieren lässt. Ich brauche das Rechteck, um immer 100% der Leinwandbreite zu sein, und die Höhe muss auch ein statisches 50px sein.

Leinwand Html

<div id="newCanvas" role="main"> 
    <canvas id="respondCanvas" width="100" height="100"> 
     Please use a different browser 
    </canvas> 
</div> 

CSS

#newCanvas { 
display:block; 
width:100%; 
padding:50px 10%; 
height:400px; 
border:2px solid black; 
background: #b8b894; /* For browsers that do not support gradients */ 
background: -webkit-linear-gradient(#b8b894, #ebebe0); /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(#b8b894, #ebebe0); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(#b8b894, #ebebe0); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(#b8b894, #ebebe0); /* Standard syntax (must be last) */ 
} 

Javascript

$(document).ready(function(){ 
    //Get the canvas & context 
    var c = $('#respondCanvas'); 
    var ct = c.get(0).getContext('2d'); 
    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(); 

    // Code I used to draw a road 
    //function drawRoad() { 
    // ctx.beginPath(); 
    // ctx.rect(x, y, w, h); 
    // ctx.closePath(); 
    // ctx.fill(); 
    //}; 

    //drawRoad(); 

    // var can = document.getElementById("newCanvas"); 
    // var ctx = can.getContext("2d"); 
    // ctx.moveTo(0, 75); //x-axis, y-axis 
    // ctx.lineTo(400, 75); 
    // ctx.strokeStyle = "grey"; 
    // ctx.lineWidth = 20; 
    // ctx.stroke(); 

}); 

Demo

Referenzen: http://www.garygarside.com/labs/responsive-canvas/

http://ameijer.nl/2011/08/resizable-html5-canvas/

Make Html5 Canvas and Its contained image responsive across browsers

Answer 1

die gewünschten Ergebnisse zu erzielen, müssen Sie die Leinwand alle paar Millisekunden neu gezeichnet und zurück auf alle Objekte zeichnen, damit Sie speichern müssen die Objekte, die Sie zeichnen möchten. Sie können dann Variablen in diesen gespeicherten Objekten ändern (mithilfe von Ereignishandlern, setTimeout() usw.), um die Änderungen anzuzeigen, die sich im Canvas widerspiegeln.

Beispiel Hauptschleife:

function update(){ 
    ctx.beginPath; 
    for(var i=0; i<rects.length;i++){ 
     ctx.drawRect(rects[i][0],rects[i][1],rects[i][2],rects[i][3]); 
    } 
    ctx.stroke(); 
} 

Hinzufügen Rechtecke (do so außerhalb Update()):

rects[easily rememberable number] = [x,y,width,height]; 

oder

rects.push(x,y,width,height); 

Um Höhe des Rechtecks ​​zu bearbeiten:

rects[#][3] = 15;