Bootstrap canvas自适应

最新推荐文章于 2024-07-26 08:43:38 发布

小太阳的大星星

最新推荐文章于 2024-07-26 08:43:38 发布

阅读量6.7k

点赞数 2

分类专栏： html前端开发文章标签： bootstrap html

本文链接：https://blog.csdn.net/u010381707/article/details/52154024

版权

html前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在bootstrap中canvas要做到自适应必须使用JavaScript动态设置canvas的宽度。

最终显示如下，绿色边框为canvas边框，红色边框为bootstrap栅格的边框，分别在两种屏幕下的显示：

html代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello</title>

    <link href="style/bootstrap.min3.3.5.css" rel="stylesheet">
    <style type="text/css">
      .border{
        border: 1px solid #f00;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4 border" id="canvas-container" style="padding: 0; margin: 0; height: 200px;">
          <canvas id="canvas" style="border: 1px solid #0f0; margin: 0; padding: 0">
            Sorry. your browser not support canvas.
          </canvas>
        </div>
      </div>
    </div>
    <script src="javascript/jquery.min1.11.3.js"></script>
    <script src="javascript/bootstrap.min3.3.5.js"></script>
    <script src="javascript/canvas_auto_resize.js"></script>
  </body>
</html>

JavaScript代码如下：

var CanvasAutoResize = {
  draw: function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var canvasContainer = document.getElementById('canvas-container');
    ctx.canvas.width  = canvasContainer.offsetWidth-2;
    ctx.canvas.height = canvasContainer.offsetHeight-2;
  },

  initialize: function(){
    var self = CanvasAutoResize;
    self.draw();
    $(window).on('resize', function(event){
      self.draw();
    });
  }
}

$(function(argument) {
  CanvasAutoResize.initialize();
});