<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#func {
position:fixed;
top: 0px;
left: 0px;
height: 100%;
width: 20%;
background-color: #f6f6f6;
overflow-x: hidden;
overflow-y: scroll;
}
.fuc {
width: 100%;
height: auto;
background-color: #eee;
font-size: 16px;
}
input {
border: none;
background-color: #eee;
width: 50%;
}
#c { background-color: #f1b; }
#canvas { position: fixed; top: 0%; left: 20%; height: 100%; width: 80%}
.sj { border-bottom: 0.5px solid black; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.4/math.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>
<body>
<div id='func'>
<div id='1' class='fuc'><label for='3#' id='c'> </label> <input placeholder='输入函数…' id='1#'/> <button onclick='plotGraph()' style='background-color: #eee;color:black;border:none'>OK</button></div>
<hr/>
<div id='2' class='fuc'>函数名称: <input placeholder='输入名称…' id='2#' value='f'/><br/>函数颜色:<input id='3#' value='#f1b'/><br/>点密度:10^<label id='mi'>-1</label><input type='range' max='0' min='-3' value='-1' id='4#'/><br/>x最小值:<input id='5#' value='-10' placeholder='输入数字…'/><br/>x最大值:<input id='6#' value='10' placeholder='输入数字…'/></div>
<hr/>
<div id='3' class='fuc'><button style='border: 1px solid #ccc;color:black;width:95%;height:5%' onclick='ex()'>导出图片</button><br/><button style='border:1px solid #ccc;color:black;width:95%;height:5%' onclick='exf()'>导出文件</button><br/><label><input type="file" id="upload" style='display:none' accept='.fdf'/><button style='border:1px solid #ccc;color:black;width:95%;height:5%' onclick='imf()'>导入存档</button><br/><button style='border:1px solid #ccc;color:black;width:95%;height:5%' onclick='nf()'>录制视频</button></label></div>
</div>
<div id='canvas'><canvas id="myChart" width="100%" height="100%"></canvas></div>
<div id='search' style='position:fixed;top:12%;left:5%;display:none;width:14%;background-color:#f6f6f6;height:10%;overflow-x:hideen;overflow-y:auto'></div>
<script>
var ce=document.getElementById("3#"),m=document.getElementById("4#"),miv=document.getElementById("5#"),mav=document.getElementById("6#");
function plotGraph() {
var userInputFunction = document.getElementById('1#').value;
var fn = document.getElementById('2#').value;
var parser = math.parser();
parser.evaluate('f(x) = ' + userInputFunction);
var data = [];
for (var x = Number(miv.value); x <= Number(mav.value); x += 10**(m.value)) {
var y = parser.evaluate('f(' + x + ')');
data.push({x: x, y: y});
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: fn,
data: data,
fill: false,
borderColor: ce.value,
tension: 0.1
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
},
y: {
beginAtZero: true
}
}
}
});
}
ce.addEventListener("keyup", function(e){
if(e.key.search(/[^0123456789abcdefABCDEF]/)>=0 && ce.value.search("#")==0 && ce.value.length>1 && e.key!=='Backspace') ce.value='';
if(ce.value.search("#")<0 && ce.value!='' && e.key!=='Enter'){
var dt='aliceblue,antiquewhite,aqua,aquamarine,azure,bisque,black,blanchedalmond,blue,blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta,darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey,honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyello,lime,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid,palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,purple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen';
dt=dt.split(',');
for(var n=0; n<dt.length; n++){
var s=dt[n];
if(s.search(ce.value)<0) dt.splice(dt.findIndex(item => item === s), 1);
}
var sd=dt.map(m => '<div height="10px" width="100%" onclick="ce.value=\''+m+'\';document.getElementById(\'search\').style.display=\'none\'" class="sj"><label style="background-color:'+m+'"> </label>'+m+'</div>').join('');
document.getElementById("search").style.display='block';
document.getElementById("search").innerHTML=sd;
} else { document.getElementById("search").style.display='none' }
document.getElementById("c").style["background-color"]=ce.value;
});
m.addEventListener("input", function(event){document.getElementById("mi").innerHTML=this.value;});
function isn(e){ if(e.key.search(/[^0123456789.-]/)>=0 && e.key!=='Backspace' && e.key!=='Shift') this.value='' };
miv.addEventListener("keyup", isn);
mav.addEventListener("keyup", isn);
function ex(){
html2canvas(document.body).then(canvas => {
var img = canvas.toDataURL("image/png");
var a = document.createElement('a');
a.href = img;
a.download = '截屏.png';
a.click();
});
};
function exf(){
var f = "{'fm':'"+document.getElementById('1#').value+"','fn':'"+document.getElementById('2#').value+"','color':'"+document.getElementById('3#').value+"','p':'"+document.getElementById('4#').value+"','miv':'"+miv.value+"','mav':'"+mav.value+"'}"
var a = document.createElement('a');
a.href =URL.createObjectURL(new Blob(['Function graph basic information'],f));
a.download = '文档.fdf';
a.click();
}
function imf(){
var upload = document.querySelector('#upload');
upload.onchange = function (e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
var json;
eval('json='+reader.result);
document.getElementById('1#').value=json.fm;
document.getElementById('2#').value=json.fn;
ce.value=json.color;
m.value=Number(json.p);
miv.value=json.miv;
mav.value=json.mav;
}
reader.onerror = (e) => {
location.reload();
}
}
}
}
var imgs=[],lz=false
function nf(){
lz=(lz==false)
if(lz==false){
function createVideoFromImages(images, fps) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream(fps);
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
let count = 0;
recorder.ondataavailable = event => {
if (event.data && event.data.size > 0) {
const blob = new Blob([event.data], { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `video-${Date.now()}.webm`;
a.click();
URL.revokeObjectURL(url);
}
};
recorder.start();
const draw = () => {
if (count >= images.length) {
recorder.stop();
return;
}
const image = new Image();
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
};
image.src = images[count++];
setTimeout(draw, 1000 / fps);
};
draw();
}
createVideoFromImages(imgs, 50);
};
setInterval(function(){
if(lz){
html2canvas(document.body).then(canvas => {
imgs.push(canvas);
});
};
},20)
}
</script>
</body>
</html>
导出,导入文档,录屏功能不可用
页面截图：
