canvas畫直角坐標系

來源：懂視網責編：小采時間：2020-11-27 15:10:29

canvas畫直角坐標系

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

推薦度：

點擊下載本文 文檔為doc格式

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

canvas畫直角坐標系

2017年3月17日

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

閑話不多說直接看代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas畫直角坐標系和柱狀圖</title>
 </head>
 <body>
 <h1>canvas畫直角坐標系及柱狀圖</h1>
 <canvas id="canvas" width="600" height="400">如果您只看到了這句話，那么您的瀏覽器該升級換代了！</canvas>
 <!--canvas的寬高即可以設置成行內樣式，也可以通過Js設置，不過建議設置成行內樣式-->
 <script src="js/drawChart.js" type="text/javascript" charset="utf-8"></script>
 <!--為了表現(xiàn)與樣式分離同時為了頁面簡潔，引入一個外部js文件-->
 <script type="text/javascript">
 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); 
 </script>
 </body>
</html>

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

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){
 //繪制之前先清空原有的柱狀圖所占區(qū)域
 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<arr.length;i++ ) {//for循環(huán)用來遍歷數組內數據
 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);//柱子的頂點位置，這里因為數組內數字小，所以都乘十了，這樣有利于小數字的表現(xiàn)
 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)+"季度業(yè)績",originX+(i+1)*20-35,originY+20)
 }
 }

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com