对于想了解canvas里设置width和css里设置width和js里设置width的区别的读者，本文将是一篇不可错过的文章，我们将详细介绍js设置canvas宽高，并且为您提供关于Android中V

对于想了解canvas 里设置 width 和 css 里设置 width 和 js 里设置 width 的区别的读者，本文将是一篇不可错过的文章，我们将详细介绍js设置canvas宽高，并且为您提供关于Android中View窗体getWidth和getMeasuredWidth的区别、canvas.width和canvas.style.width区别以及应用、clientWidth offsetWidth scrollWidth的区别、clientWidth、scrollWidth 与 offsetWidth 的区别详解的有价值信息。

本文目录一览：

• canvas 里设置 width 和 css 里设置 width 和 js 里设置 width 的区别（js设置canvas宽高）
• Android中View窗体getWidth和getMeasuredWidth的区别
• canvas.width和canvas.style.width区别以及应用
• clientWidth offsetWidth scrollWidth的区别
• clientWidth、scrollWidth 与 offsetWidth 的区别详解

canvas 里设置 width 和 css 里设置 width 和 js 里设置 width 的区别（js设置canvas宽高）

 canvas.width 和 它的 style.width 是不一样的：

        canvas 是个画布，有他自己的宽和高（默认是没有单位的纯数字），就是 canvas.width 和 canvas.height 的宽和高，

                    行间样式里如果你用 vh 和 vw 设置宽高，不好意思，不可以，统统按照 px 计算，

                    css 里可以用 vw，vh。但是，请记住，这里设置的是 style. 属性；

                    js 里用带有单位的字符串比如 vw 和 vh 还有 px，设置 width 和 height，还是不好意思，不好使，

                            这样就不好使！！！

 

                              (style 属性是表现在页面上的样式，不是 canvas 的本身的属性。一定要注意。随意设置 style 的宽高直接导致的结果就是画画变形变形变形）

     好了，那么怎么做比较好？

    我的做法是，要想自适应屏幕的大小。  可以在 css 里设置 width（就是 style.width ）为 vw 单位的宽度；在 js 里获取它的 width (canvas 的属性)  然后赋值给 height。

                              

Android中View窗体getWidth和getMeasuredWidth的区别

今天在研究自定义listview的下拉刷新的效果，想移植到项目需求中，再看自定义源码时发现了一个问题就是getWidth和getMeasuredWidth两个方法有什么区别，求教万能的百度，经调研发现这两个方法的不同点是，getWidth获得的是当前View的可视的宽度，但是向下拉刷新这样的需求，那个头部提示的View是隐藏起来的这样用getWidth就获取不到View的宽度了，所以采取getMeasuredWidth的方式获得。getMeasuredWidth的方法代表了可以获取View的可视化宽度+隐藏地方的宽度。在这个需求中我们的headView始终是隐藏的所以只有通过这个getMeasuredWidth的方法才可以获得到想要的宽度，一下是一张图代表了我说的原理，这样更直观一些。

特别感谢帖子地址：http://blog.sina.com.cn/s/blog_6e519585010152s5.html

canvas.width和canvas.style.width区别以及应用

今天讲的内容是canvas.width和canvas.style.width的区别，在没有做canvas项目之前，其实我是并没有深入了解过这两个属性的，最近在研究canvas项目的自适应问题，尤其是在canvas中置入图片，碰到了图片模糊的问题，这些“杂症”都是和文章要讲的canvas.width/canvas.style.width有关系。

canvas.width/canvas.style.width概览

先看一下这个例子：https://codepen.io/parkeeers/...

<canvas id="diagonal1"width="100px" height="100px">
</canvas>
<canvas id="diagonal2"width="100px" height="100px">
</canvas>
<canvas id="diagonal3">
</canvas>
<canvas id="diagonal4">
</canvas>

// JavaScript
function drawDiagonal(id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(100, 100);
  context.stroke();
}

window.onload = function() {
  drawDiagonal("diagonal1");
  drawDiagonal("diagonal2");
  drawDiagonal("diagonal3");
  drawDiagonal("diagonal4");
}
 

效果图

• 我们来看第一个canvas，指定了canvas的大小，并未指定canvas.style的大小，那么画布就是实实在在是100*100大小，我们JS代码中，也是在画一条从（0，0）到（100， 100）的对角线。第一个完全没有问题
• 第二个canvas，canvas本身以及canvas.style都进行了定义，从定义可以看到canvas.style就是在将我们的画布放大2倍，从图也能看到，这条线指向对角没问题，但是变粗了，这也证明了，canvas先是参考自己的本身画布大小进行绘制，绘制完毕，由style指定的大小，渲染在浏览器页面

• 第三个canvas，本身的canvas与canvas.style不成比例，html中并没有显示的声明canvas本身的大小，只声明了style的大小，那么这种情况下，canvas画布本身的大小就是默认值300*150；那么我们依托300*150进行绘制，就像第四个纯净的canvas上的线条一样绘制，绘制完毕后，要渲染到页面，这个时候，还是和canvas2那个套路一样，依据style指定的width，height进行缩放，状态就由第四个canvas变成了第三个最后的样子。我们来看一下公式：
  默认大小300*150，style指定大小200*200

  
  

  最后标准位置下的（100，100）就变成了在style下200*200的（66.7， 133.333）

• 最后一幅图就是当不指定canvas大小时，默认的大小，标准的300*150

总结：举了三个不同但是互相关联的例子，通过这些，我们能了解，canvas本身是一个画布，我们怎么理解画布，决定了我们是否能正确的理解canvas.width和canvas.style.width的区别。canvas.width就是画布真实的大小，这个画布不是我们能看到的画布，我们能看见的画布，已经是在浏览器处理canvas.style.width/canvas.style.height之后，加工处理后的画布。而cavnas.style.width/canvas.style.height决定了画布以怎样的形式进行缩放展示给页面。转换的比例就是上面两个公式。最后，当我们不指定canvas的真实大小时，默认按照300*150处理。

• canvas.width / canvas.height 表示画布真实大小，其实我们并不可见
• canvas.style.width / canvas.style.height 表示画布输出到浏览器我们可见的/最终的大小
• 不提供canvas真实大小时，默认按300*150处理，如果canvas.style也没提供，那么style.width为空，注意并不是300*150

canvas图片模糊的问题（待完善）

再讲canvas图片模糊的问题之前，我们可以看一下上面第二个canvas，真实大小与样式指定的大小是呈2倍关系，最后我们的线条也是放大2倍，大家要注意一个概念，canvas绘制是以自己真实大小来定位&绘制的，最后由浏览器渲染到页面可见时，由canvas.style.width/cavnas.style.height决定的

clientWidth offsetWidth scrollWidth的区别

scrollWidth  
是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。 
clientWidth  
是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。  
offsetWidth  
是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。  

一个scrollWidth和clientWidth的例子：  
<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert(''scrollWidth:''+this.scrollWidth+''\n clientWidth:''+this.clientWidth);"></textarea>  
</body>  
</html>  
在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。  
scrollWidth是对象实际内容的宽度。  
clientWidth是对象看到的宽度（不含边线），这个例子里不会改变。  

一个clientWidth和offsetWidth的例子：  
<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert(''offsetWidth:''+this.offsetWidth+''\n clientWidth:''+this.clientWidth);"></textarea>  
</body>  
</html>  
offsetWidth的值总是比clientWidth的值大。  
clientWidth是对象看到的宽度（不含边线）  
offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽）

clientWidth、scrollWidth 与 offsetWidth 的区别详解

clientWidth、scrollWidth 与 offsetWidth 这三种经常会混淆，举例解释这三种宽度

1、没有滚动条的情况

 #boxWrap {
        width: 300px;
        height: 300px;
        background: pink;
        overflow: auto;
    }

    #box1 {
        width: 200px;
        height: 200px;
        background: gray;
        margin: 0 auto;
        padding: 10px;
        border: 5px solid #ccc;
        box-sizing: content-box;
    }
<div id="boxWrap">
    <div id="box1">this is the box </div>
    </div>
<script type="text/javascript">
var clientWidth=document.getElementById("box1").clientWidth;//220     clientWidth=content+padding
var scrollWidth=document.getElementById("box1").scrollWidth;//220     scrollWidth=content+padding
var offsetWidth=document.getElementById("box1").offsetWidth;//230     offsetWidth=content+padding+border
alert(clientWidth + " , " + scrollWidth + " , " + offsetWidth)
</script>

上面没有滚动条的情况下 clientWidth:220   scrollWidth:220    offsetWidth:230

2、含有滚动条的情况

（1）对于里面的 box（box2）

#boxWrap {
        width: 300px;
        padding:10px;
        border:1px solid #ccc;
        height: 300px;
        background: pink;
        overflow: auto;
        box-sizing: content-box;
    }

   
    #box2 {
        width: 400px;
        height: 400px;
        background: gray;
        margin: 0 auto;
        padding: 10px;
        border: 5px solid #ccc;
        box-sizing: content-box;
    }

<div id="boxWrap">
      <div id="box2">this is another box </div>
</div>
<script type="text/javascript">
var clientWidth2 = document.getElementById("box2").clientWidth; //420     
var scrollWidth2 = document.getElementById("box2").scrollWidth; //420     
var offsetWidth2 = document.getElementById("box2").offsetWidth; //430     
alert(clientWidth2 + " , " + scrollWidth2 + " , " + offsetWidth2) 
</script>

在有滚动条时对于里面的 box 来说是跟没有滚动条是一样的

（2）对于外面的 box（boxWrap）

<script type="text/javascript">
var clientWidth3 = document.getElementById("boxWrap").clientWidth; //303  
var scrollWidth3 = document.getElementById("boxWrap").scrollWidth; //440     
var offsetWidth3 = document.getElementById("boxWrap").offsetWidth; //322     
alert(clientWidth3 + " , " + scrollWidth3 + " , " + offsetWidth3)
</script>

外面的 box 受到里面 box 的影响，如果里面的 box 比较大，会有滚动条，

外面 box 的 clientWidth= content+padding - 滚动条的宽度（大概是 17px）

外面 box 的 scrollWidth = 里面 box 的总宽度（里面 box 的 content+padding+border）+ 外面 box 一边的 padding

外面 box 的 offsetWidth = 外面 box 自身的 content+padding+border

关于canvas 里设置 width 和 css 里设置 width 和 js 里设置 width 的区别和js设置canvas宽高的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于Android中View窗体getWidth和getMeasuredWidth的区别、canvas.width和canvas.style.width区别以及应用、clientWidth offsetWidth scrollWidth的区别、clientWidth、scrollWidth 与 offsetWidth 的区别详解的相关信息，请在本站寻找。

本文标签：

• Canvas
• Width
• JS设置
• CSS对比