响应画布元素

Responsive canvas element

本文关键字：元素 布元素 响应      更新时间：2023-09-26

我已经创建了一个响应画布，但我很难弄清楚如何使画布内的矩形元素也响应。我需要矩形始终是画布宽度的100%，高度也需要是静态的50px。

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

Demohttps://jsfiddle.net/ccvk3y5q/

参考文献：http://www.garygarside.com/labs/responsive-canvas/

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

使Html5 Canvas及其包含的图像在浏览器中响应

要获得所需的结果，必须每隔几毫秒重新绘制一次画布，并重新绘制所有对象，因此必须存储要绘制的对象。然后，您可以更改这些存储对象中的变量（使用事件处理程序、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();
}

添加矩形（在update（）外部执行）：

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

或

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

编辑矩形高度：

rects[#][3] = 15;
相关文章：