canvas畫直角坐標(biāo)系

2017年3月17日

利用canvas畫直角坐標(biāo)系其實(shí)挺簡單的，只要確定了原點(diǎn)(0，0)點(diǎn)，也可以是其他的點(diǎn)，只要自己知道那是原點(diǎn)就行！知道了原點(diǎn)再分別向X軸方向和Y軸方向畫兩條直線即可(X軸和Y軸也是相對的，這個(gè)純看個(gè)人喜好和實(shí)際需求)。

閑話不多說直接看代碼：

canvas畫直角坐標(biāo)系和柱狀圖

canvas畫直角坐標(biāo)系及柱狀圖

如果您只看到了這句話，那么您的瀏覽器該升級換代了！

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

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

//通過id獲取canvas畫布，并獲得cxt畫筆，canvas目前只支持2d效果，所以“2d”不能省；

var arr = [16,15,20,21]//利用數(shù)組模擬柱狀圖的數(shù)據(jù)

Coordinate(50,350);//自己寫的一個(gè)直角坐標(biāo)系

ColumnChart1(50,350,arr); //一個(gè)簡單的柱狀圖函數(shù)

/*為了有個(gè)簡單的動(dòng)畫效果，canvas繪制完成以后先將它隱藏，然后用jQuery的slideDown()方法淡入顯示*/

$("#canvas").hide();

$("#canvas").slideDown(1000);

然后就是直角坐標(biāo)系的繪制方法(如果那位大神看到了功能更加完善，代碼量可以更加精簡的，請不吝賜教，謝謝)：function Coordinate(x,y){

//x為橫坐標(biāo)起點(diǎn)，Y為縱坐標(biāo)起點(diǎn)

var originX = x;

var originY = y;

//設(shè)置原點(diǎn)的那個(gè)文字的樣式，并繪制出來

cxt.font = "2rem 微軟雅黑";

cxt.fillText("0",originX-10,originY+15);//此處-10和+15是為了調(diào)整字的位置

cxt.strokeStyle = "black";//設(shè)置坐標(biāo)系X軸Y軸的顏色，繪制線條用strockeStyle屬性，繪制填充色塊用fillStyle屬性；

cxt.lineWidth = 3;//設(shè)置線條粗細(xì)，這里為了方便看設(shè)置了3個(gè)像素，可以根據(jù)情況自行調(diào)整

//開始繪制Y軸

cxt.beginPath();//開啟路徑

cxt.moveTo(originX,originY);//x軸與y軸的起點(diǎn)位置

cxt.lineTo(originX,originY-320);//軸的終點(diǎn)位置，即X大小不變，只是改變了Y點(diǎn)位置(根據(jù)實(shí)際情況做調(diào)整)；

cxt.stroke();//將這條線繪制出來

//畫小箭頭

cxt.moveTo(originX,originY-320);//小箭頭起點(diǎn)位置即為Y軸終點(diǎn)位置

cxt.lineTo(originX+3,originY-310);//originX+3和originY-310是設(shè)置小箭頭的終點(diǎn)位置，小箭頭的大小和尖銳程度請自行摸索

cxt.stroke();

cxt.moveTo(originX,originY-320);

cxt.lineTo(originX-3,originY-310);

cxt.stroke();

//畫橫坐標(biāo)

//繪制X軸和Y軸相似

cxt.moveTo(originX,originY);

cxt.lineTo(originX+450,originY);

cxt.stroke();

//畫小箭頭

cxt.moveTo(originX+450,originY);

cxt.lineTo(originX+440,originY-3);

cxt.stroke();

cxt.moveTo(originX+450,originY);

cxt.lineTo(originX+440,originY+3);

cxt.stroke();

cxt.fillText("Y軸",originX-5,originY-325)

}

然后就是柱狀圖的繪制方法：function ColumnChart1(x,y,arr){

//繪制之前先清空原有的柱狀圖所占區(qū)域

cxt.clearRect(x,y,500,0);

var arrColor = ["red","yellow","blue","purple","green","mauve"];//為了使每個(gè)柱子的顏色不一樣，如果可以盡量用#******或rgb()方法設(shè)置顏色，因?yàn)槲疫@樣直接用單詞有些瀏覽器對個(gè)別顏色不識別(頭疼的IE)

//請務(wù)必保持x，y值與坐標(biāo)系的x，y值相同

this.arr= arr;

for (var i=0;i

if(i==0){

var originX = x+40;

var originY = y-1;

}else{

var originX = i*70+80;

var originY = y-1;

}

cxt.beginPath();

cxt.strokeStyle = arrColor[i];//設(shè)置線條顏色

cxt.lineWidth = 20;//這里為了方便直接將線條的寬度設(shè)置為20，這樣就可以模擬柱子

cxt.moveTo(originX+(i+1)*20,originY);//柱子的頂點(diǎn)位置，這里因?yàn)閿?shù)組內(nèi)數(shù)字小，所以都乘十了，這樣有利于小數(shù)字的表現(xiàn)

cxt.lineTo(originX+(i+1)*20,originY-(arr[i]*10));//調(diào)整每根柱子的間距；

cxt.stroke();

cxt.font = "20px 宋體"

cxt.fillText(arr[i],originX+(i+1)*20-10,originY-(arr[i]*10+3));

//文字的繪制

cxt.font = "13px 宋體"

cxt.fillText("第"+(i+1)+"季度業(yè)績",originX+(i+1)*20-35,originY+20)

}

}

如果還想圖表看起來更加美觀，可以用canvas提供的shadowColor、shadowOffsetX、shadowOffsetY等相關(guān)屬性設(shè)置陰影。

同時(shí)以柱子的頂點(diǎn)為圓心畫一個(gè)顏色略異于柱子的橢圓即可。

總結(jié)

以上是生活随笔為你收集整理的html绘制直角坐标系,canvas画直角坐标系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。