数学教具功能beta版本开发
程序员文章站
2022-04-30 19:15:12
相关了解:jCanvas防止注入MediaRecord 动画日志收集废话不多说先贴成品抖音上有很多类似下图的情况,所以就突发奇想,想做一个简单的工具,目前还是初版,功能很简单;方便教学场景的使用工具,目前只支持 绘制矩形、圆形、直线、文字,支持动画过渡体验地址: https://ibeeger.com/math/体验地址中案例写的比较简单,凑合看了~~~~使用文档说明绘制矩形:rect(x,y, width,height)绘制圆形:circle(r, x, y)绘制直线...
相关了解:
- 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
推荐阅读
-
苹果向开发者推送watchOS 3.1.3 Beta 2版本
-
iOS/iPadOS 15 开发者预览版 Beta4(版本号19A5307g)正式更新
-
小米路由器AX9000开发者版本怎么体验Docker功能?
-
苹果为开发者推送iOS 11.3 Beta 3:加入电池健康功能
-
Jetpack compose 正式发布beta版本,原生Android 开发将更轻松!
-
好久不来,PHP开源论坛-YouYaX beta 5版本发布啦 菜单功能
-
良久不来,PHP开源论坛-YouYaX beta 5版本发布啦 菜单功能
-
好久不来,PHP开源论坛-YouYaX beta 5版本发布啦 菜单功能
-
数学教具功能beta版本开发
-
良久不来,PHP开源论坛-YouYaX beta 5版本发布啦 菜单功能