数学教具功能beta版本开发

相关了解：

• jCanvas
• 防止注入
• MediaRecord 动画
• 日志收集

废话不多说先贴成品


抖音上有很多类似下图的情况，所以就突发奇想，想做一个简单的工具，目前还是初版，功能很简单；方便教学场景的使用工具，

目前只支持 绘制矩形、圆形、直线、文字，支持动画过渡

体验地址： https://ibeeger.com/math/
体验地址中案例写的比较简单，凑合看了~~~~

使用文档说明

• 绘制矩形：rect(x,y, width,height)
• 绘制圆形：circle(r, x, y)
• 绘制直线：line({x: x, y: y}, {x: x, y: y}, color) 开始坐标，结束坐标 color = ‘#xxxxxx’
• 延迟动效: delay(s) //s 单位秒
• 过渡动效：to({proto}, s) // 参数1属性变更如 {x: 10} , 参数s 单位秒

jCanvas文档：https://projects.calebevans.me/jcanvas/docs/

前端注意：
由于做的比较简陋，用到了eval，会有一些js方法的隐患，知识做了简单的过滤，希望各位大佬发现问题多多指点

replace(/\$|XMLHttpRequest|http|ajax|fetch/g, '').trim()

录制动画：前面已经说过了 MediaRecord 录制canvas

let recorder = new MediaRecorder(stream, {
		mimeType: 'video/webm;codecs=vp8'
	})
	recorder.start(0);
	recorder.addEventListener('dataavailable', function(e) {
		if (e.data.size > 0) {
			chunks.push(e.data);
		}
		if (recorder.state == 'inactive') {
			const blob = new Blob(chunks, {
				type: 'video/webm;codecs=vp8'
			});
			var reader = new FileReader();
			reader.onload = function() {
				// console.log(reader.result); // base64格式 
			}
			// reader.readAsText(blob, 'utf-8')
			reader.readAsDataURL(blob, 'utf-8')
			// reader.readAsBinaryString(blob, 'utf-8')
			// reader.readAsArrayBuffer(blob, 'utf-8')
			createWebM(URL.createObjectURL(blob));
		}
	}, false);

下载录制动画：

绘制完成之后需要点击运行之后，才能生成动画，点击下载等待动画生成完成（大概3~5秒）之后就可以到本地，webm格式。
如果只是绘制静态的图形，可以直接下载图片。
当然也可以扣扣、WX截图~~~

日志收集：

let bs = window.btoa(encodeURIComponent(jsstr));
let img = document.createElement('img');
img.src = 'xxxxx.com/log?c='+bs;

收集到转换的公式

最后欢迎各位老师多多提意见、建议

本文地址：https://blog.csdn.net/uk_51/article/details/109366709