Элемент реагирующего холста

Question

Я создал отзывчивый холст, но мне сложно определить, как сделать элемент прямоугольника внутри холста также чувствительным. Мне нужно, чтобы прямоугольник всегда составлял 100% ширины холста, а высота тоже должна быть статичной 50 пикселей.

Холст 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 https://jsfiddle.net/ccvk3y5q/

Ссылки: 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

Для достижения желаемых результатов, вы должны перерисовать холст каждые несколько миллисекунд и нарисовать все объекты обратно, так что вы должны хранить объекты, которые вы хотите нарисовать. Затем вы можете изменить переменные в этих хранимых объектах (используя обработчики событий, setTimeout() и т. Д.), Чтобы увидеть изменения, отраженные в холсте.

Пример основной цикл:

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

Чтобы добавить прямоугольниками (сделать это за пределами обновления()):

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

или

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

Чтобы изменить высоту прямоугольника:

rects[#][3] = 15;