canvas.style.width是浏览器渲染canvas的尺寸，而canvas.width是canvas的画布大小。所以不要误以为在css里面设置了canvas的尺寸就OK啦。如果没有设置canvas的width和height属性，则其默认值是width:300px,height:150px。（PS:同时利用style.width,style.height,width,height可控制缩放效果）。

demo:


DOCTYPE html>
<</span>html>
<</span>head>
    <</span>title>Demo</</span>title>
    <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <</span>script type="text/javascript">
            function drawDiagonal(id){
                var canvas=document.getElementByIdx_x(id);
                var context=canvas.getContext("2d");
                context.beginPath();
                context.moveTo(0,0);
                context.lineTo(100,100);
                context.stroke();
            }

            window.onload=function(){
                drawDiagonal("diagonal1");
                drawDiagonal("diagonal2");
                drawDiagonal("diagonal3");
            }
    </</span>script>
</</span>head>
<</span>body>
    <</span>canvas id="diagonal1" style="border:1px solid;" width="100px" height="100px"></</span>canvas>
    <</span>canvas id="diagonal2" style="border:1px solid;width:200px;height:200px;" width="100px" height="100px"></</span>canvas>
    <</span>canvas id="diagonal3" style="border:1px solid;width:200px;height:200px;"></</span>canvas>
</</span>body>
</</span>html>

2.canvas在手机上的效果是变模糊了，原因是被自动放大了。所以必须得把canvas放大。大家或许会问到底要放大多少。这是我们需要根据不同的手机的devicePixelRatio（设备像素比，简介文章：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/）来进行缩放canvas。

利用devicePixelRatio和第一个问题的方法，我们可以解决如题现象。

demo（手机截图）：

左图模糊，右图正常。表格上的圆上用css写的，用来作对比。该demo的源代码地址是：http://files.cnblogs.com/joyho/graph.rar

左图的源代码：


DOCTYPE html>
<</span>html>
<</span>head>
<</span>meta http-equiv="content-type"  content="text/html; charset=utf-8" />
<</span>meta http-equiv="Cache-Control" content="no-cache" />
<</span>meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<</span>meta name="MobileOptimized" content="320"/>
<</span>title></</span>title>
    <</span>style>
      .spot{
        display: block;
        background:#1881f0;
        width:18px;
        height:18px;
        border-radius: 9px;
        margin-left:100px;
      }
    </</span>style>
</</span>head>
  <</span>body>
    <</span>span class="spot"></</span>span>
    <</span>canvas id="a_canvas" width="400" height="300"></</span>canvas>

    <</span>script type="text/javascript">
      (function (){

        window.addEventListener("load", function(){

          var data = [80,92,104,110,68,50,45,90,74,68,98,103];

          // 获取上下文
          var a_canvas = document.getElementByIdx_x('a_canvas');
          var context = a_canvas.getContext("2d");


          // 描绘边框
          var grid_cols = data.length + 1;
          var grid_rows = 10;
          var cell_height = a_canvas.height / grid_rows;
          var cell_width = a_canvas.width / grid_cols;
          context.lineWidth = 1;
          context.strokeStyle = "#cdcdcd";
          console.log("cell_width,cell_height:",cell_width,cell_height);

          // 结束边框描绘
          context.beginPath();
          // 准备画横线
          for (var col = 0; col <= grid_cols; col++) {
            var x = col * cell_width;
            context.moveTo(x,0);
            context.lineTo(x,a_canvas.height);
          }
          // 准备画竖线
          for(var row = 0; row <= grid_rows; row++){
            var y = row * cell_height;
            context.moveTo(0,y);
            context.lineTo(a_canvas.width, y);
          }
          context.lineWidth = 1;
          context.strokeStyle = "#cdcdcd";
          context.stroke();

          var max_v = 0;
          for(var i = 0; i<</span>data.length; i++){
            if (data[i] > max_v) { max_v = data[i]};
          }

          max_v = max_v * 1.1;
          // 将数据换算为坐标
          var points = [];
          for( var i=0; i <</span> data.length; i++){
            var v= data[i];
            var px = cell_width *　(i +1);
            var py = v;
            points.push({"x":px,"y":py});
          }
          // 绘制折现
          context.beginPath();
          context.moveTo(points[0].x, points[0].y);
          for(var i= 1; i<</span> points.length; i++){
            context.lineTo(points[i].x,points[i].y);
            console.log(points[i].x,points[i].y);
          }


          context.lineWidth = 2;
          context.strokeStyle = "#1881f0";
          context.stroke();

          //绘制坐标图形
          for(var i in points){
            var p = points[i];
            context.beginPath();
            context.arc(p.x,p.y,9,0,2*Math.PI);
            context.fillStyle = "#1881f0";
            context.fill();

            //写文字
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillStyle = "#fff";
            context.font="12px Arial";
            context.fillText("12", p.x-1,p.y-1)
          }
          
        },false);
      })();
    </</span>script>
  </</span>body>

右图的源代码如下

其中解决问题的关键代码是：


var tScale  = window.devicePixelRatio,
      tWidth  = 400,
      tHeight = 300;
    a_canvas.style.width = tWidth + "px";
    a_canvas.style.height = tHeight + "px";
    a_canvas.width = tWidth * tScale;
    a_canvas.height = tHeight * tScale;



其中圆、文字、线条也需要乘以这个window.devicePixelRatio的值：



　　context.arc(p.x,p.y,9*tScale,0,2*Math.PI);//圆半径：9*tScale



　　context.font=12*tScale+"px Arial";//文字大小：12*tScale



　　context.lineWidth = 2;//线条的宽度:1*tScale


DOCTYPE html>
<</span>html>
<</span>head>
<</span>meta http-equiv="content-type"  content="text/html; charset=utf-8" />
<</span>meta http-equiv="Cache-Control" content="no-cache" />
<</span>meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<</span>title></</span>title>
    <</span>style>
      .spot{
        display: block;
        background:#1881f0;
        width:18px;
        height:18px;
        border-radius: 9px;
        margin-left:100px;
      }
    </</span>style>
</</span>head>
  <</span>body>
    <</span>span class="spot"></</span>span>
    <</span>canvas id="a_canvas"></</span>canvas>

    <</span>script type="text/javascript">
      (function (){
        window.addEventListener("load", function(){

          var data = [80,92,104,110,68,50,45,90,74,68,98,103];

          // 获取上下文
          var a_canvas = document.getElementByIdx_x('a_canvas');
      

    var tScale  = window.devicePixelRatio,
      tWidth  = 400,
      tHeight = 300;
    a_canvas.style.width = tWidth + "px";
    a_canvas.style.height = tHeight + "px";
    a_canvas.width = tWidth * tScale;
    a_canvas.height = tHeight * tScale;

    for(var i=0;i<</span>data.length;i++){
      data[i] = data[i]*tScale;
    }
          var context = a_canvas.getContext("2d");
    

         
          // 描绘边框
          var grid_cols = data.length + 1;
          var grid_rows = 10;
          var cell_height = a_canvas.height / grid_rows;
          var cell_width = a_canvas.width / grid_cols;
          context.lineWidth = 1;
          context.strokeStyle = "#cdcdcd";
          console.log("cell_width,cell_height:",cell_width,cell_height);

          // 结束边框描绘
          context.beginPath();
          // 准备画横线
          for (var col = 0; col <= grid_cols; col++) {
            var x = col * cell_width;
            context.moveTo(x,0);
            context.lineTo(x,a_canvas.height);
          }
          // 准备画竖线
          for(var row = 0; row <= grid_rows; row++){
            var y = row * cell_height;
            context.moveTo(0,y);
            context.lineTo(a_canvas.width, y);
          }
          context.lineWidth = 1;
          context.strokeStyle = "#cdcdcd";
          context.stroke();

          var max_v = 0;
          for(var i = 0; i<</span>data.length; i++){
            if (data[i] > max_v) { max_v = data[i]};
          }

          max_v = max_v * 1.1;
          // 将数据换算为坐标
          var points = [];
          for( var i=0; i <</span> data.length; i++){
            var v= data[i];
            var px = cell_width *　(i +1);
            var py = v;
            points.push({"x":px,"y":py});
          }
          // 绘制折现
          context.beginPath();
          context.moveTo(points[0].x, points[0].y);
          for(var i= 1; i<</span> points.length; i++){
            context.lineTo(points[i].x,points[i].y);
            console.log(points[i].x,points[i].y);
          }


          context.lineWidth = 2;
          context.strokeStyle = "#1881f0";
          context.stroke();

          //绘制坐标图形
          for(var i in points){
            var p = points[i];
            context.beginPath();
            context.arc(p.x,p.y,9*tScale,0,2*Math.PI);
            context.fillStyle = "#1881f0";
            context.fill();

            //写文字
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillStyle = "#fff";
            context.font=12*tScale+"px Arial";
            context.fillText("12", p.x-1,p.y-1)
          }
          
        },false);
      })();
    </</span>script>
  </</span>body>

阅读┊ 评论 ┊ 收藏 ┊转载 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：（转）提高 HTML5 画布性能

后一篇：[转载]nginx反向代理做cache配置

[发评论]

评论加载中，请稍候...

发评论

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。

< 前一篇（转）提高 HTML5 画布性能

后一篇 >[转载]nginx反向代理做cache配置

新浪BLOG意见反馈留言板　电话：4000520066 提示音后按1键（按当地市话标准计费）　欢迎批评指正