畫布畫越來越模糊

-1

不知何故，當附着在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

來源

2015-06-27 Sandeep Khatri

如何創建的jsfiddle刪除樣式，將重現問題，告訴jsfiddle的結果不符合您的期望？ – fuyushimoya

在較小分辨率或頁面上放大畫像被縮放 – ioanD

https://jsfiddle.net/x2y2z2xyz3/aw5ggpy9/ –

它模糊了振振有辭的監守您的CSS畫布中的canvas標籤中。

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

畫布的標準尺寸爲300x150像素，使用CSS更改寬度和高度將縮放畫布。要改變畫布的大小，而不是做在JavaScript代碼

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

從你的canvas標籤在你的HTML代碼

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

來源

2015-06-27 16:09:06 Niddro

非常感謝Niddro –

畫布畫越來越模糊

回答

相關問題