当前位置:编程学习 > JAVA >>

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>

作者 牛-_-蜗

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,