前言
这篇文章会讲下,如果通过Go来操作canvas,然后画一个类似腾讯文档表格一样的,在线的表格。当然,这肯定是个demo(你懂的)。然后,这篇文章主要会讲下面几个点:
- 使用Go来操作canvas绘制表格
- 使用js来操作canvas绘制表格
- 性能问题
使用Go操作canvas绘制表格
这里我们就直接上Go的代码了,如果有对Go如何编译成wasm或者其他的基础问题,可以查看这个系列的之前的几篇文章。
package mainimport ("fmt""syscall/js""time")var drawCtx js.Valuevar window js.Valuefunc init() {window = js.Global()doc := window.Get("document")body := doc.Get("body")canvas := doc.Call("createElement", "canvas")canvas.Set("height", window.Get("innerHeight"))canvas.Set("width", window.Get("innerWidth"))body.Call("appendChild", canvas)drawCtx = canvas.Call("getContext", "2d")}func drawTable() {width := window.Get("innerWidth").Int()height := window.Get("innerHeight").Int()// 绘制之前清空下画布drawCtx.Call("clearRect", 0, 0, width, height)// 单元格的宽高cellHeight := 22cellWidth := 120drawCtx.Set("strokeStyle", "#dcdcdc")drawCtx.Set("lineWidth", 1)drawCtx.Call("translate", -0.5, -0.5)drawCtx.Call("beginPath")// 划竖线for i := 0; i < width; i = i + cellWidth {drawCtx.Call("moveTo", i, 0)drawCtx.Call("lineTo", i, height)drawCtx.Call("stroke")}// 划横线for j := 0; j < height; j = j + cellHeight {drawCtx.Call("moveTo", 0, j)drawCtx.Call("lineTo", width, j)}drawCtx.Call("stroke")drawCtx.Call("translate", 0.5, 0.5)}func main() {drawTable()// 阻止go程序退出,因为退出了,js端就不能再调用了signal := make(chan int)<-signal}复制代码
前端js的代码:
const go = new Go()WebAssembly.instantiateStreaming(fetch('main.wasm'), go.importObject) .then(async result => { go.run(result.instance); });复制代码
上面就是一个平平无奇的使用Go绘制一个二维表格的demo。先看下效果,然后再来讲下代码:
效果就是上面这个样子,看起来跟腾讯文档表格还是挺像的,对不对?
在上面的代码中,我们定义了一个init函数和一个drawTable函数,你可能已经发现了,代码里面,其他任何地方都没有调用init函数,为什么可以正常运行?drawCtx等对象正常初始化了。这是为啥呢?其实如果你熟悉Go的话,就知道,init方法,在每个包加载执行之前,会先执行该包下的init方法。这个是Go语言本身的特性,在我们这个例子中,那就是init方法,会比main方法先执行。这样你应该明白了对不对。
init函数代码说明
drawCtx = canvas.Call("getContext", "2d")复制代码
在初始化方法中,前面的几行代码,就是往页面中添加一个canvas的dom,然后获取到canvas对象。上面的一行代码最关键,通过canvas对象,获取了canvas的2d上下文对象,有了这个对象之后,我们才能够执行绘制的操作。
drawTable函数代码说明
width := window.Get("innerWidth").Int() height := window.Get("innerHeight").Int()复制代码
从截图可以看出,我们的表格是占满整个窗口的,所以我们需要先获取窗口的宽高。
drawCtx.Call("translate", -0.5, -0.5) drawCtx.Call("translate", 0.5, 0.5)复制代码
如果你对canvas的绘制原理不是特别了解,你应该会看不懂这两行代码在干什么。
来看下去掉这两行代码之后的效果:
对比上面的截图,你应该可以发现这两行是用来干嘛的了。
drawCtx.Call("beginPath")// 划竖线for i := 0; i < width; i = i + cellWidth {drawCtx.Call("moveTo", i, 0)drawCtx.Call("lineTo", i, height)drawCtx.Call("stroke")}// 划横线for j := 0; j < height; j = j + cellHeight {drawCtx.Call("moveTo", 0, j)drawCtx.Call("lineTo", width, j)}drawCtx.Call("stroke")复制代码
这里的代码,应该比较简单了,就是分别绘制表格的横线和竖线。应该很容易看懂了对不对。
main函数里面,只有调用了drawTable()函数,没有其他操作,就不说了。
上面大概就是使用Go来操作canvas绘制一个二维的表格了,不过非常简陋,实际项目中肯定不是这么搞的,但是用的东西就是上面这些。你懂我意思吧?
使用js来操作canvas绘制表格
因为后面要对比下,js和wasm的操作canvas的性能,所以,还是给一个js的代码:
let drawCtx ;const width = window.innerWidthconst height = window.innerHeightfunction init() { const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; document.body.appendChild(canvas); drawCtx = canvas.getContext("2d")}function drawTable() { // 绘制之前清空下画布 drawCtx.clearRect(0, 0, width, height) // 单元格的宽高 const cellHeight = 22 const cellWidth = 120 drawCtx.strokeStyle = "#dcdcdc"; drawCtx.lineWidth = 1; drawCtx.translate(-0.5, -0.5) drawCtx.beginPath() // 划竖线 for(let i = 0; i < width; i = i + cellWidth ){ drawCtx.moveTo(i, 0) drawCtx.lineTo(i, height) drawCtx.stroke() } // 划横线 for(let j = 0; j < height; j = j + cellHeight) { drawCtx.moveTo(0, j) drawCtx.lineTo(width, j) } drawCtx.stroke() drawCtx.translate(0.5, 0.5)}init();// const s = Date.now();// for (let i=0; i< 100000; i++) { drawTable();// }// console.log(Date.now() - s)复制代码
代码跟上面的Go代码,一模一样,因为我就是从上面复制过来,改成js的。 js的代码,我这里就不说明了,你应该都可以看懂的,对不对?
性能问题
绘制1000次
wasm(Go):300ms左右
js: 24ms左右
绘制10000次
wasm(Go):2.7s左右
js: 180ms左右
可以看到,直接使用js来绘制canvas会比wasm要快很多。 这其实也说明一个问题,wasm它的使用场景,并不是让你来操作dom的,它是使用在特定场景下的,比如上篇文章中说的文件md5计算的场景,操作dom这种,我们还是按常规操作就行了。上面的测试基于我的这个demo代码,然后在Chrome浏览器,iMac下的测试数据,如果有问题,欢迎联系我。
总结
上面的例子可以看出,使用Go可以操作前端的任何东西,包括dom,js对象等等。但是,我们在实际使用的时候,一定要知道,什么场景,使用什么样的技术来实现,能够得到最优的性能,这才是我们在实际的项目开发中,需要考虑的点。这篇文章大概就到这里,有任何问题,欢迎联系我,?。
文章来源:智云一二三科技
文章标题:使用Go开发前端应用(四)- 操作canvas绘制一个表格
文章地址:https://www.zhihuclub.com/380.shtml