canvas畫直角坐標系

2017年3月17日

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

閑話不多說直接看代碼：

canvas畫直角坐標系和柱狀圖

canvas畫直角坐標系及柱狀圖

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

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

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

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

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

Coordinate(50,350);//自己寫的一個直角坐標系

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

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

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

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

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

//x為橫坐標起點，Y為縱坐標起點

var originX = x;

var originY = y;

//設置原點的那個文字的樣式，并繪制出來

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

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

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

cxt.lineWidth = 3;//設置線條粗細，這里為了方便看設置了3個像素，可以根據情況自行調整

//開始繪制Y軸

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

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

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

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

//畫小箭頭

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

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

cxt.stroke();

cxt.moveTo(originX,originY-320);

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

cxt.stroke();

//畫橫坐標

//繪制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){

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

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

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

//請務必保持x，y值與坐標系的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];//設置線條顏色

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

cxt.moveTo(originX+(i+1)*20,originY);//柱子的頂點位置，這里因為數組內數字小，所以都乘十了，這樣有利于小數字的表現

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

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)+"季度業績",originX+(i+1)*20-35,originY+20)

}

}

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

同時以柱子的頂點為圓心畫一個顏色略異于柱子的橢圓即可。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。