Question

当在jquery ui的标签下附加时，画布绘图会变得模糊。任何人都可以帮我弄清楚为什么画布会变得模糊吗？

问题似乎在本节

  .ui-tabs-panel {
    height:500px; }
  #chartCanvas-1,#crossCanvas-1{

    position:absolute; top:50px; left:0px;
    /*border:1px solid blue;
    width:500px;
    height:400px;*/
  }
/*#crossCanvas-1{ border:1.5px solid green;}
#chartCanvas-1{ border:1px solid red;}*/

使用jquery 1.8.3 使用jquery ui和css

<html lang="en">
<head>
 <meta charset="utf-8" />
<title> Create dynamic Tabs using jQuery and css</title>
<script  type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
  $(function() {
    var tabTitle = $( "#tab_title" ),
      tabContent = $( "#tab_content" ),
      tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
      tabCounter = 2;

    var tabs = $( "#tabs" ).tabs();

    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var dialog = $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Add: function() {
          addTab();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find( "form" ).submit(function( event ) {
      addTab();
      dialog.dialog( "close" );
      event.preventDefault();
    });

    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
      var label = tabTitle.val() || "Tab " + tabCounter,
        id = "tabs-" + tabCounter,
        chartCanvas_id = "chartCanvas-" + tabCounter,
        crossCanvas_id = "crossCanvas-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

      tabs.find( ".ui-tabs-nav" ).append( li );      
      tabs.append( "<div id='" + id + "'><canvas id='"+chartCanvas_id+  "'></canvas><canvas id='"+crossCanvas_id+  "'></canvas></div>" );
      tabs.tabs( "refresh" );
      tabCounter++;
    }

    // addTab button: just opens the dialog
    $( "#add_tab" )
      .button()
      .click(function() {
        dialog.dialog( "open" );
      });

    // close icon: removing the tab on click
    $( "#tabs span.ui-icon-close" ).live( "click", function() {
      var panelId = $( this ).closest( "li" ).attr( "aria-controls" );
      if( panelId !== "tabs-1")
      {
            panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
          $( "#" + panelId ).remove();
          tabs.tabs( "refresh" );
      }

      });

      var canvas=document.getElementById("chartCanvas-1");
      var context=canvas.getContext("2d");
      var canvasOffset=$("#chartCanvas-1").offset();
      /*var canvasTemp=document.getElementById("crossCanvas-1");
      var ctxTemp=canvasTemp.getContext("2d");
      var offsetX=canvasOffset.left;
      var offsetY=canvasOffset.top;*/
      context.beginPath();
      context.moveTo(10, 10);
      context.lineTo(40,30);
      context.stroke();
      context.closePath();
      /*ctxTemp.beginPath();
      ctxTemp.moveTo(0, 0);
      ctxTemp.lineTo(40,50);
      ctxTemp.stroke();
      ctxTemp.closePath();          */


  });
  </script>
<link rel="stylesheet" href="jquery-ui.css">

<style type="text/css">
  #dialog label, #dialog input { display:block; }
  #dialog label { margin-top: 0.5em; }
  #dialog input, #dialog textarea { width: 95%; }
  #tabs { margin-top: 0.7em; height: 600px;}

  #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
  #add_tab { cursor: pointer; }
  .ui-tabs-panel {
    height:500px; }
  #chartCanvas-1,#crossCanvas-1{

    position:absolute; top:50px; left:0px;
    /*border:1px solid blue;
    width:500px;
    height:400px;*/
  }
/*#crossCanvas-1{ border:1.5px solid green;}
#chartCanvas-1{ border:1px solid red;}*/
  </style>
</head>
<body>
<div id="dialog" title="Tab data">
  <form>
    <fieldset class="ui-helper-reset">
      <label for="tab_title">Title</label>
      <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
      <label for="tab_content">Content</label>
      <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
    </fieldset>
  </form>
</div>

<button id="add_tab">Add Tab</button>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Default</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>        
  </ul>
  <div id="tabs-1">
    <canvas id="chartCanvas-1" style="width: 600px; height: 400px"></canvas>
    <!-- <canvas id="crossCanvas-1" style="width: 600px; height: 400px"></canvas> -->
  </div>
</div>


</body>
</html>

此致 SK

Answer 1

模糊的共鸣是因为画布上的画布CSS。

<canvas id="chartCanvas-1" style="width: 600px; height: 400px"></canvas>

画布的标准尺寸为300x150像素，使用CSS更改宽度和高度将缩放画布。要更改画布的大小，请在JavaSCript代码中执行此操作

canvas.width = 600;
canvas.height = 400;

并从HTML代码中的canvas标记中删除样式

<canvas id="chartCanvas-1"></canvas>

帆布画得到模糊

1 个答案: