                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas繪圖詳解

線條比較粗什么原因？

自己寫代碼 cxt.lineWidth=1;還是比較粗，而且有點模糊，求支招

湖工咖啡

2015-12-08

源自：Canvas繪圖詳解 2-6

關注問題我要回答

795

操作

收起

5 回答

李曉健回答被采納 +3 積分
2015-12-08

我也不知道為什么。<canvas id="canvas0" width="400" height="400"></canvas> ? 這里的寬和高像你那個寫在style中就會出現你的那種問題。如果直接寫到width和height屬性上就沒有問題。你可以js中獲取窗口的大小，然后設置canvas 的 width和 height

0 回復有任何疑惑可以回復我~

收起回答

湖工咖啡提問者

果然大神，問題已解決！

2015-12-08 回復有任何疑惑可以回復我~

霞_霞
2015-12-14

.canvas.style.width跟canvas.width（同理，canvas.style.height和canvas.style.height）是兩個不同的概念。canvas.style.width是瀏覽器渲染canvas的尺寸，而canvas.width是canvas的畫布大小。所以不要誤以為在css里面設置了canvas的尺寸就OK啦。如果沒有設置canvas的width和height屬性，則其默認值是width:300px,height:150px。

0 回復有任何疑惑可以回復我~

收起回答

湖工咖啡提問者
2015-12-08

var canvas=document.getElementById("canvas0");
var HEIGHT=canvas.height;
var WIDTH=canvas.width;
var hdistance=HEIGHT/8;
var wdistance=WIDTH/12;

window.onload=function()
{
? ?var i;
? ?/*水平*/
? ?for(i=1;i<8;i++)
? ?{
? ? ? ?cxt.save();
? ? ? ?cxt.translate(0.4,0.4);
? ? ? ?cxt.lineWidth=0.4;
? ? ? ?cxt.beginPath();
? ? ? ?cxt.moveTo(0,hdistance*i);
? ? ? ?cxt.lineTo(WIDTH,hdistance*i);
? ? ? ?cxt.closePath();
? ? ? ?if(i==4)
? ? ? ? ? ?cxt.strokeStyle="#5F9EA0";
? ? ? ?else
? ? ? ? ? ?cxt.strokeStyle="#ADD8E6";
? ? ? ?cxt.stroke();
? ? ? ?cxt.restore();
? ?}