javascript不受canvas大小改動影響 實現繪製座標軸

 

今天實在閑來蛋疼，群裡遇到一位好友利用canvas繪製曲線映像出問題了，當然了作為一個灰常熱心滴小盆友的我當然不免去看看問題了，協助這位朋友解決完問題以後發現，他的canvas繪製過程中是固定大小，所有繪製都是寫死的。這樣腫麼擴充，為了他好，我就動手寫了一個canvas可以任意改變demo......調試了一下，繪製木有問題了，分享一下！！！！（由於在家純記事本打出來的，看了一下沒有報錯，要是有分號該寫沒寫的，請提醒我，謝謝。）x、y軸的繪製間距為20px

 

轉載請著名地址，謝謝

 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> </script>

 

<canvas id="controlCanvas" height="519" width="1035" ></canvas>//高寬任你調整

<button id="changeSize">變化大小</button>

<script type="text/javascript" src="jquery-1.6.4.min.js" /> </script>

<script type="text/javascript">

 

$(function(){

init();

 

$("#changeSize").click(function(){

$("#controlCanvas").attr("height",800);

$("#controlCanvas").attr("width",1100);

 

init();

});

 

})

function init()

{

 

var canvas = document.getElementById("controlCanvas");

var context = canvas.getContext("2d");

var canvasWidth=$(canvas).attr("width");//擷取canvas的寬度

 

var canvasHeight=$(canvas).attr("Height");//擷取canvas的高度

var canvasWidthFloat=canvasWidth%20; //防止canvas寬度不是20的倍數，要不然繪製的座標點會有問題

var canvasHeightFloat=canvasHeight%20; //防止canvas高度不是20的倍數，要不然繪製的座標點會有問題

//繪製y軸平行線

for ( var x = 20; x <canvasWidth-20; x += 20) {

context.moveTo(x, canvasHeightFloat);

context.lineTo(x, canvasHeight-20);

}

//繪製x軸平行線

for ( var y = 20; y <canvasHeight-20; y += 20) {

context.moveTo(20, y+canvasHeightFloat);

context.lineTo(canvasWidth-20, y+canvasHeightFloat);

}

context.strokeStyle = "#ddd";

context.stroke();

context.beginPath();

//畫橫座標

context.moveTo(20, canvasHeight-20);

context.lineTo(canvasWidth-20, canvasHeight-20);

context.moveTo(canvasWidth-35, canvasHeight-30);

context.lineTo(canvasWidth-20, canvasHeight-20);

context.lineTo(canvasWidth-35, canvasHeight-10);

//畫縱座標

context.moveTo(20, canvasHeight-20);

context.lineTo(20, canvasHeightFloat);

context.moveTo(10, canvasHeightFloat+15);

context.lineTo(20, canvasHeightFloat);

context.lineTo(30, canvasHeightFloat+15);

 

 

 

context.strokeStyle = "#000";

context.stroke();

var yvalue=0

var yvalueMax=parseInt((canvasHeight-20)/20)

//這樣你的y座標就不會受到canvas變法而煩惱了

for(var x=20;x<canvasHeight;x+=20)

{

if(yvalue==yvalueMax)

break;

context.fillText(yvalue++,5,canvasHeight-x+3);//讓y軸的值向下移動3px，讓y值顯示在平行線的中間

}

//x軸座標，這裡修複了一下canvas不是20倍數以後，座標點為移動的問題-_-!經過測試，無論你怎麼調整都沒事哦

var xvalue=parseInt((canvasWidth-20)/20)-1

for(var y=20;y<canvasWidth;y+=20)

{

if(xvalue==0)

break;

context.fillText(xvalue--,canvasWidth-y-canvasWidthFloat-3,canvasHeight-5);//讓x軸的值向右移動3px，讓x值顯示在平行線的中間

}

 

}

 

 

</script>

作者 牛-_-蝸