JavaScript結合canva實現簡單的繪圖工具

更新時間：2024年12月23日 09:35:58 作者：cpp-csharp-developer

這篇文章主要給大家介紹了如何使用JavaScript和HTML的Canvas標簽創(chuàng)建一個簡單的圖表工具,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

使用瀏覽器打開html文件

點擊【選擇文件】按鈕，打開分行的測試數據，測試數據是0~10 之間的隨機數
效果圖如下：

測試數據 randodata.dat 中的部分內容：

HTML代碼

<html>
<body width="100%">
<canvas id="canvas1" style="border:solid 2px black"></canvas><br/>
<input type="button" id="prepage" value="上一頁"/></div><input id="nextpage" type="button" value="下一頁"/><input type="file" id="file1" onchange="fileSelected(this)" />
<div id="pageIndexDiv">1/1</div>
</body>
<script>
    var curPageIndex = 0;
    var totleCount = 0;
    var contentArr =[];
    var pageSize = 1500;
    this.ctx = canvas1.getContext('2d');
    canvas1.width = pageSize;
    canvas1.height = 200;
    
    function drawLine(x1, y1, x2, y2) {
        this.ctx.beginPath();
        this.ctx.strokeStyle = "#008888";
        this.ctx.moveTo(x1, y1);
        this.ctx.lineTo(x2, y2);
        this.ctx.stroke();
    }
    //drawLine(0, 0, 50, 50);  drawLine(50, 50, 100, 0);
    const reader = new FileReader();
    reader.onload = function (e) {
        let content = e.target.result;
        contentArr = content.split('\n');
        curPage = 0;
        totleCount = contentArr.length;
        drawPage(0);
    };
    function clearCanvas() { 
        this.ctx.fillStyle = "#e0e0e0";
        this.ctx.fillRect(0, 0, canvas1.width, canvas1.height);
    }
    function drawPage(index) {
        if(index < totleCount/pageSize && index>=0) {
            for(var i = 0;i<  pageSize-1;i++) {
                drawLine(i,parseInt(contentArr[i+ index* pageSize]) + 100,i+1,parseInt(contentArr[index* pageSize+1])+100);
            }
        }   
        pageIndexDiv.innerText = curPageIndex.toString() + "/" + (totleCount/pageSize).toString(); 
    }
    function fileSelected() {
        reader.readAsText(file1.files[0]);
    }
    prepage.onclick = function(){
        clearCanvas();
        curPageIndex--;
        drawPage(curPageIndex);
    };
    nextpage.onclick = function(){
        clearCanvas();
        curPageIndex++;
        drawPage(curPageIndex);
    };
    pageIndexDiv.innerText = curPageIndex.toString() + "/" + (totleCount/pageSize).toString();
    clearCanvas();
</script>
</html>