zoukankan      html  css  js  c++  java
  • canvas基础入门(一)canvas的width、height于css样式中的宽高区别

    canvas的width、height于css样式中的宽高对画布的内容显示是有所区别的

    1、在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也是w3c的标准,如下:

    <canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器!</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas"),
            ctx = canvas.getContext('2d');
        ctx.moveTo(0,0);
        ctx.lineTo(300,150);
        ctx.stroke();
    </script>

    运行代码效果如下,为对角线

    使用style时图像会被拉伸(变形)

    <style>
        #mycanvas {
             width: 150px;
             height: 150px;
        }
    </style>

    运行效果

    Canvas元素将由原来大小被拉伸到所设置的宽高

    会造成拉伸的还有:

    canvas.style.height = "768px";

    jq的$("canvas").width(500)

  • 相关阅读:
    团队开发-第一阶段冲刺-10
    团队开发-第一阶段冲刺-09
    Spring(三)
    第五周总结
    Spring(一)
    程序员修炼之道:从小工到专家阅读笔记1
    MyBatis(三)
    MyBatis(二)
    MyBatis
    第四周总结
  • 原文地址:https://www.cnblogs.com/YAN-HUA/p/9213900.html
Copyright © 2011-2022 走看看