canvas元素的大小与绘图表面的大小

最新推荐文章于 2025-02-17 17:17:17 发布

原创最新推荐文章于 2025-02-17 17:17:17 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

Html5_学习笔记专栏收录该内容

17 篇文章

订阅专栏

使用css来设置canvas元素的大小,与直接设置属性相比,其差别是基于这样一个事实,canvas元素实际上有两套尺寸,一个是元素本身的大小,还有一个是元素绘图表面的大小

当设置元素的width与height 属性时,实际上是同时修改了该元素本身的大小与元素绘图表面的大小,通过css来设定canvas元素的大小,只会改变元素本身的大小而不会影响到绘图表面,canvas元素与其绘图表面默认大小300x150像素,所以当canvas元素的大小不符合其绘图表面的大小时,浏览器会对绘图表面进行缩放,使其符合元素大小,下面这个例子

元素本身的大小是CSS中设定的600x300,绘图表面大小是300x150,两者大小不一致，所以浏览器会将绘图表面从300x150像素拉伸到600x300像素,第二张图是直接指定元素大小为 600x300的效果图。

   <head>
     <title>Canvas element size: 600 x 300, Canvas drawing surface size: 300 x 150</title>

      <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;  
            height: 300px; 
         }
      </style>
   </head>

  <body>
    <canvas id='canvas'>
      Canvas not supported
    </canvas>

   <script>
	var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d');
   
	context.font = '38pt Arial';
	context.fillStyle = 'cornflowerblue';
	context.strokeStyle = 'blue';

	context.fillText("Hello Canvas", canvas.width/2 - 150,
                                 canvas.height/2 + 15);

	context.strokeText("Hello Canvas", canvas.width/2 - 150,
                                   canvas.height/2 + 15);
 </script>
  </body>
</html>

演示地址：http://sandbox.runjs.cn/show/ed6sllnx