canvas学习001

发表于 分类于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 1 分钟

自适应满屏

CSS 方面：去掉所有元素的外间距、内边距，html 和 body 宽高设为 100%，canvas 元素 display 设为 block
JS 方面：监听窗口的 resize 事件，在窗口大小改变的同时调整 canvas 的大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.1.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
        width: 100%;
      }
      canvas {
        display: block;
        background: #D6F8FF;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        //添加窗口尺寸改变响应监听
        $(window).resize(resizeCanvas);
        //页面加载后先设置一下canvas大小
        resizeCanvas();
      });
 
      //窗口尺寸改变响应（修改canvas大小）-20 会两边留白一部分
      function resizeCanvas() {
        $("#canvas").attr("width", $(window).get(0).innerWidth- 20) ;
        $("#canvas").attr("height", $(window).get(0).innerHeight- 20) ;
      };
    </script>
  </head>
  <body>
    <canvas id="canvas" style="background: #D6F8FF"></canvas>
  </body>
</html>

如果字体模糊

var getPixelRatio = function (context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    };

     var ratio = getPixelRatio(ctx);
     context.fillStyle = 'red'
     ctx.font = "14px Arial";
     ctx.fillText("5分钟 15分钟 30分钟 60分钟 日线 周线 月线 季线 半年线 年线", 20 * ratio, 20 * ratio);