美文网首页
2020-03-30 canvas画布自适应父div

2020-03-30 canvas画布自适应父div

作者: 夜色001 | 来源:发表于2020-03-30 10:38 被阅读0次

    使用canvas画图时,我们希望当改变窗口大小,画布随窗口自适应改变画布大小。

    我们要注意两个参数:canvas width属性、和style的width属性。
    前者是画布的大小,我们可以将其设置成固定大小。这样后续画图坐标就可以使用绝对值了。
    后者是canvas相对于父元素的大小,canvas窗口会根据该值进行缩放,设置成100%。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
                function drawDiagonal(id){
                    var canvas=document.getElementById(id);
                    var context=canvas.getContext("2d");
                    context.beginPath();
                    context.moveTo(20,20);
                    context.lineTo(80,80);
                    context.stroke();
                }
    
                window.onload=function(){
                    drawDiagonal("diagonal1");d
                }
        </script>
    </head>
    <body sytle="text-align:center">
        <div style="width:50%;margin:0 auto">
            <canvas id="diagonal1" style="border:1px solid;width:100%;" width="100px" height="100px"></canvas>
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:2020-03-30 canvas画布自适应父div

          本文链接:https://www.haomeiwen.com/subject/yhmmuhtx.html