canvas-html属性width与css的width区别

javascript

canvas中标签属性的width，height与css的width，height的区别

canvas中，如果不写width和height，会默认width=300，height=150。

标签属性中的width和height可以理解为虚拟画布的宽高，比如设置width=3000，height=1000，在js中对其进行绘图时，都是在这个宽3000，高1000的画布上进行绘制。
而css的width和height是绘制好的这块画布在实际的页面中显示的具体宽高，可以把画布理解为一张宽3000，高1000的图片，当设置其css宽高时，这张图片会根据实际的宽高进行变化。

附上一段代码，可以更改width和height观察其变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
</head>
<style>
  canvas {
    border: 1px solid blue;
    width: 300px;
    height: 300px;
  }
</style>
<body>
  <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>
</body>
</html>

  canvas