使用画布自动调整背景图像大小

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用画布自动调整背景图像大小相关的知识，希望对你有一定的参考价值。

The canvas drawImage size default is 300 x 150, so it's using the CSS to resize the canvas. Example posted at http://pastebin.me/76aed7005b1b413ea3c479287f4dbd59
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Conforming XHTML 1.0 Strict Template</title>
  6. </head>
  7. <body>
  8.  
  9. <h2>Auto-resizing the background image using Canvas</h2>
  10.  
  11. <canvas id="myCanvas" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: -1;"></canvas>
  12. <script type="text/javascript">
  13.  var context = document.getElementById('myCanvas').getContext('2d');
  14.  var w = document.body.clientWidth;
  15.  var h = document.body.clientHeight;
  16.  img = new Image();
  17.  img.src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg';
  18.  img.onload = function () {
  19.   context.drawImage(this,0,0,300,150);
  20.  };
  21. </script>
  22. </body>
  23. </html>

以上是关于使用画布自动调整背景图像大小的主要内容，如果未能解决你的问题，请参考以下文章

颤振形状调整大小并在图像背景画布上拖动

使用 ImageMagick 自动调整大小覆盖两个图像

根据分辨率自动调整背景图像大小

PHP GD - 调整图像框架/画布的大小，但不是实际图像

HTML5 画布：图像大小调整

使用 Fabric js 使背景图像适合画布大小