JavaScript结合canva实现简单的绘图工具
作者：cpp-csharp-developer
这篇文章主要给大家介绍了如何使用JavaScript和HTML的Canvas标签创建一个简单的图表工具,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
使用Javascript 结合 html 的canva标签实现的简单图表工具
使用浏览器打开html文件
点击【选择文件】按钮，打开分行的测试数据，测试数据是0~10 之间的随机数
效果图如下：
测试数据 randodata.dat 中的部分内容：
7 0 0 6 3 3 6 6 4 1 6 4 6 3 8 5 9 7 9 6 7 6 9
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>总结
到此这篇关于JavaScript结合canva实现简单的绘图工具的文章就介绍到这了,更多相关JS绘图工具内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！