vue实现画笔回放，canvas转视频播放功能
示例图：
一、vue2版本
回放
暂停
继续
二、vue3版本
![]()
回放
暂停
继续
三、页面调用
1、vue2
（1）安装 canvasvideo-vue
npm install canvasvideo-vue --save（2）main.js引入
import { createApp } from 'vue'
import App from './App.vue'
import canvasVideo from "canvasvideo-vue"
import "../node_modules/canvasvideo-vue/canvasVideo-vue.css"
const app = createApp(App)
app.use(canvasVideo)
.mount("#app")
（3）页面调用
2、vue3
（1）页面调用
（2）调整字号：其中整体坐标展示后，文字会显示的很小，使用x,y轴去乘倍数即可
backPlayList.value.map((item:any) => {
item.x = item.x * 2
item.y = item.y * 2
return item
})四、数据结构
let datas = [
[
{
"x": 144.42779541015625,
"y": 112.7576904296875,
"time": 1702536449825
},
{
"x": 144.42779541015625,
"y": 122.65827941894531,
"time": 1702536449857
},
{
"x": 144.42779541015625,
"y": 128.27886962890625,
"time": 1702536449871
},
{
"x": 144.42779541015625,
"y": 134.2593231201172,
"time": 1702536449889
},
{
"x": 144.42779541015625,
"y": 146.72254943847656,
"time": 1702536449939
},
{
"x": 144.42779541015625,
"y": 157.4418182373047,
"time": 1702536449955
},
{
"x": 145.78329467773438,
"y": 162.1194610595703,
"time": 1702536449971
},
{
"x": 145.76043701171875,
"y": 167.31605529785156,
"time": 1702536449989
},
{
"x": 146.4267578125,
"y": 172.4877471923828,
"time": 1702536450007
},
{
"x": 146.4267578125,
"y": 177.4159698486328,
"time": 1702536450020
},
{
"x": 146.4267578125,
"y": 182.0648651123047,
"time": 1702536450039
},
{
"x": 147.09307861328125,
"y": 187.20314025878906,
"time": 1702536450053
},
{
"x": 147.762451171875,
"y": 192.70411682128906,
"time": 1702536450070
},
{
"x": 148.41329956054688,
"y": 197.30494689941406,
"time": 1702536450088
},
{
"x": 149.09210205078125,
"y": 202.69898986816406,
"time": 1702536450103
},
{
"x": 149.7584228515625,
"y": 207.8609161376953,
"time": 1702536450121
},
{
"x": 150.42477416992188,
"y": 212.64430236816406,
"time": 1702536450140
},
{
"x": 151.09112548828125,
"y": 217.8363494873047,
"time": 1702536450158
},
{
"x": 151.09112548828125,
"y": 223.17628479003906,
"time": 1702536450178
},
{
"x": 151.7574462890625,
"y": 229.3798065185547,
"time": 1702536450194
},
{
"x": 151.7574462890625,
"y": 234.6603240966797,
"time": 1702536450204
},
{
"x": 151.7574462890625,
"y": 239.9730987548828,
"time": 1702536450221
},
{
"x": 151.7574462890625,
"y": 245.2152862548828,
"time": 1702536450246
},
{
"x": 151.7574462890625,
"y": 251.24928283691406,
"time": 1702536450257
},
{
"x": 151.09112548828125,
"y": 257.2041473388672,
"time": 1702536450270
},
{
"x": 151.09112548828125,
"y": 261.8277130126953,
"time": 1702536450288
},
{
"x": 151.09112548828125,
"y": 267.2612762451172,
"time": 1702536450308
},
{
"x": 151.09112548828125,
"y": 273.2233123779297,
"time": 1702536450322
},
{
"x": 151.09112548828125,
"y": 279.8961639404297,
"time": 1702536450342
},
{
"x": 151.09112548828125,
"y": 285.8682403564453,
"time": 1702536450358
},
{
"x": 152.39996337890625,
"y": 291.18141174316406,
"time": 1702536450370
},
{
"x": 153.7384033203125,
"y": 297.18141174316406,
"time": 1702536450389
},
{
"x": 155.09494018554688,
"y": 303.9618377685547,
"time": 1702536450405
},
{
"x": 156.41146850585938,
"y": 309.8865203857422,
"time": 1702536450420
},
{
"x": 158.44903564453125,
"y": 314.70338439941406,
"time": 1702536450442
},
{
"x": 161.03179931640625,
"y": 319.8107147216797,
"time": 1702536450455
},
{
"x": 163.73126220703125,
"y": 325.8739776611328,
"time": 1702536450473
},
{
"x": 165.68637084960938,
"y": 331.1151580810547,
"time": 1702536450488
},
{
"x": 168.38128662109375,
"y": 336.5032501220703,
"time": 1702536450503
},
{
"x": 171.0692138671875,
"y": 341.2170867919922,
"time": 1702536450521
},
{
"x": 173.73162841796875,
"y": 345.2093963623047,
"time": 1702536450538
},
{
"x": 176.42041015625,
"y": 348.57081604003906,
"time": 1702536450554
},
{
"x": 179.12631225585938,
"y": 351.2758026123047,
"time": 1702536450571
},
{
"x": 181.71502685546875,
"y": 353.8636932373047,
"time": 1702536450588
},
{
"x": 184.35678100585938,
"y": 355.19776916503906,
"time": 1702536450605
},
{
"x": 187.10076904296875,
"y": 356.5692901611328,
"time": 1702536450621
},
{
"x": 188.40576171875,
"y": 357.2216033935547,
"time": 1702536450636
}
],
[
{
"x": 278.3201904296875,
"y": 225.33656311035156,
"time": 1702536451411
},
{
"x": 290.136962890625,
"y": 225.3314971923828,
"time": 1702536451431
},
{
"x": 305.58203125,
"y": 225.9976043701172,
"time": 1702536451442
},
{
"x": 319.9619140625,
"y": 225.9976043701172,
"time": 1702536451457
},
{
"x": 331.8698425292969,
"y": 226.6862030029297,
"time": 1702536451472
},
{
"x": 342.2525329589844,
"y": 227.32032775878906,
"time": 1702536451488
},
{
"x": 351.42987060546875,
"y": 227.32984924316406,
"time": 1702536451504
},
{
"x": 361.1939697265625,
"y": 227.32984924316406,
"time": 1702536451521
},
{
"x": 370.506103515625,
"y": 226.6363983154297,
"time": 1702536451540
},
{
"x": 377.578857421875,
"y": 226.01075744628906,
"time": 1702536451585
},
{
"x": 396.9224853515625,
"y": 223.3396759033203,
"time": 1702536451589
},
{
"x": 404.81201171875,
"y": 222.0262908935547,
"time": 1702536451603
},
{
"x": 412.2171630859375,
"y": 220.68153381347656,
"time": 1702536451621
},
{
"x": 418.94720458984375,
"y": 219.33851623535156,
"time": 1702536451637
},
{
"x": 424.103515625,
"y": 218.0503692626953,
"time": 1702536451654
},
{
"x": 429.489013671875,
"y": 218.00428771972656,
"time": 1702536451671
},
{
"x": 433.5123291015625,
"y": 218.00428771972656,
"time": 1702536451687
},
{
"x": 436.1656494140625,
"y": 217.33815002441406,
"time": 1702536451703
},
{
"x": 438.26458740234375,
"y": 217.33815002441406,
"time": 1702536451720
},
{
"x": 439.58154296875,
"y": 217.33815002441406,
"time": 1702536451740
},
{
"x": 439.613525390625,
"y": 217.33815002441406,
"time": 1702536451761
}
],
[
{
"x": 359.6776123046875,
"y": 148.3515167236328,
"time": 1702536452241
},
{
"x": 360.95751953125,
"y": 166.9501495361328,
"time": 1702536452258
},
{
"x": 361.6524658203125,
"y": 186.5827178955078,
"time": 1702536452270
},
{
"x": 362.3128662109375,
"y": 203.9375762939453,
"time": 1702536452288
},
{
"x": 362.9931640625,
"y": 218.0919647216797,
"time": 1702536452306
},
{
"x": 364.331787109375,
"y": 232.8119354248047,
"time": 1702536452320
},
{
"x": 364.984130859375,
"y": 247.2077178955078,
"time": 1702536452337
},
{
"x": 365.6175537109375,
"y": 260.9715118408203,
"time": 1702536452354
},
{
"x": 366.2884521484375,
"y": 275.6442413330078,
"time": 1702536452371
},
{
"x": 367.6258544921875,
"y": 289.0420379638672,
"time": 1702536452390
},
{
"x": 368.8919677734375,
"y": 301.1228790283203,
"time": 1702536452403
},
{
"x": 370.292724609375,
"y": 313.0811309814453,
"time": 1702536452421
},
{
"x": 372.9156494140625,
"y": 323.0240936279297,
"time": 1702536452438
},
{
"x": 374.9552001953125,
"y": 330.4568634033203,
"time": 1702536452455
},
{
"x": 377.5841064453125,
"y": 337.0873565673828,
"time": 1702536452471
},
{
"x": 378.9256591796875,
"y": 342.3609161376953,
"time": 1702536452488
},
{
"x": 380.2994384765625,
"y": 347.8545379638672,
"time": 1702536452505
},
{
"x": 381.62762451171875,
"y": 351.8480682373047,
"time": 1702536452520
},
{
"x": 382.308837890625,
"y": 354.4903106689453,
"time": 1702536452545
},
{
"x": 382.308837890625,
"y": 354.55714416503906,
"time": 1702536452556
}
],
[
{
"x": 586.8844604492188,
"y": 151.2805633544922,
"time": 1702536453141
},
{
"x": 585.511962890625,
"y": 165.02943420410156,
"time": 1702536453157
},
{
"x": 584.8742065429688,
"y": 183.56068420410156,
"time": 1702536453173
},
{
"x": 584.8742065429688,
"y": 201.2294158935547,
"time": 1702536453188
},
{
"x": 584.8742065429688,
"y": 215.3689422607422,
"time": 1702536453204
},
{
"x": 584.8742065429688,
"y": 230.58912658691406,
"time": 1702536453222
},
{
"x": 585.54052734375,
"y": 243.74464416503906,
"time": 1702536453239
},
{
"x": 586.8107299804688,
"y": 256.01344299316406,
"time": 1702536453256
},
{
"x": 587.5194091796875,
"y": 267.7810821533203,
"time": 1702536453271
},
{
"x": 588.8597412109375,
"y": 279.1865692138672,
"time": 1702536453288
},
{
"x": 590.2003784179688,
"y": 289.90699768066406,
"time": 1702536453304
},
{
"x": 591.52001953125,
"y": 301.1284942626953,
"time": 1702536453321
},
{
"x": 592.8444213867188,
"y": 311.0792694091797,
"time": 1702536453339
},
{
"x": 594.8500366210938,
"y": 320.5182342529297,
"time": 1702536453355
},
{
"x": 596.1693115234375,
"y": 328.3832244873047,
"time": 1702536453371
},
{
"x": 597.5363159179688,
"y": 336.58277893066406,
"time": 1702536453390
},
{
"x": 598.8732299804688,
"y": 343.2628936767578,
"time": 1702536453404
},
{
"x": 600.2008666992188,
"y": 348.56568908691406,
"time": 1702536453420
},
{
"x": 600.8662109375,
"y": 353.1544647216797,
"time": 1702536453438
},
{
"x": 600.8662109375,
"y": 356.4942169189453,
"time": 1702536453454
},
{
"x": 600.8662109375,
"y": 358.5269012451172,
"time": 1702536453472
},
{
"x": 600.8662109375,
"y": 358.5537872314453,
"time": 1702536453482
}
],
[
{
"x": 679.638916015625,
"y": 223.9750518798828,
"time": 1702536453873
},
{
"x": 698.049560546875,
"y": 220.69044494628906,
"time": 1702536453889
},
{
"x": 715.046142578125,
"y": 218.70338439941406,
"time": 1702536453912
},
{
"x": 731.1329956054688,
"y": 217.30799865722656,
"time": 1702536453922
},
{
"x": 743.7023315429688,
"y": 216.6453094482422,
"time": 1702536453939
},
{
"x": 755.0431518554688,
"y": 216.6720428466797,
"time": 1702536453957
},
{
"x": 764.043701171875,
"y": 216.6720428466797,
"time": 1702536453972
},
{
"x": 770.6744995117188,
"y": 216.6720428466797,
"time": 1702536453988
},
{
"x": 776.098388671875,
"y": 216.6720428466797,
"time": 1702536454005
},
{
"x": 780.066650390625,
"y": 216.6720428466797,
"time": 1702536454021
},
{
"x": 783.4193115234375,
"y": 216.6720428466797,
"time": 1702536454041
},
{
"x": 785.4308471679688,
"y": 216.6720428466797,
"time": 1702536454057
},
{
"x": 786.7714233398438,
"y": 216.6720428466797,
"time": 1702536454070
},
{
"x": 786.7733154296875,
"y": 216.6720428466797,
"time": 1702536454083
}
],
[
{
"x": 733.5531616210938,
"y": 316.62501525878906,
"time": 1702536454456
},
{
"x": 756.4210815429688,
"y": 315.2781524658203,
"time": 1702536454472
},
{
"x": 775.4960327148438,
"y": 315.2565460205078,
"time": 1702536454488
},
{
"x": 790.3649291992188,
"y": 317.1736297607422,
"time": 1702536454506
},
{
"x": 804.3414916992188,
"y": 319.8348846435547,
"time": 1702536454524
},
{
"x": 815.0912475585938,
"y": 323.1543731689453,
"time": 1702536454540
},
{
"x": 823.2052612304688,
"y": 325.8422393798828,
"time": 1702536454556
},
{
"x": 829.9567260742188,
"y": 328.5275115966797,
"time": 1702536454571
},
{
"x": 835.1862182617188,
"y": 329.8536834716797,
"time": 1702536454589
},
{
"x": 839.3932495117188,
"y": 330.5771026611328,
"time": 1702536454606
},
{
"x": 841.41259765625,
"y": 330.5771026611328,
"time": 1702536454618
}
],
[
{
"x": 783.1222534179688,
"y": 122.69233703613281,
"time": 1702536454959
},
{
"x": 807.8834838867188,
"y": 125.26026916503906,
"time": 1702536454974
},
{
"x": 833.0866088867188,
"y": 128.6871337890625,
"time": 1702536454989
},
{
"x": 854.1300659179688,
"y": 132.88661193847656,
"time": 1702536455006
},
{
"x": 869.70361328125,
"y": 138.1724853515625,
"time": 1702536455021
},
{
"x": 882.982666015625,
"y": 144.5460968017578,
"time": 1702536455042
},
{
"x": 895.916748046875,
"y": 152.63514709472656,
"time": 1702536455056
},
{
"x": 906.02685546875,
"y": 160.70143127441406,
"time": 1702536455071
},
{
"x": 916.085693359375,
"y": 170.0878448486328,
"time": 1702536455090
},
{
"x": 925.06689453125,
"y": 182.9326934814453,
"time": 1702536455105
},
{
"x": 932.54638671875,
"y": 195.7455291748047,
"time": 1702536455121
},
{
"x": 937.921142578125,
"y": 209.0699920654297,
"time": 1702536455139
},
{
"x": 941.3206787109375,
"y": 221.79115295410156,
"time": 1702536455159
},
{
"x": 943.363037109375,
"y": 235.3358612060547,
"time": 1702536455171
},
{
"x": 943.3616943359375,
"y": 248.3235626220703,
"time": 1702536455187
},
{
"x": 942.05517578125,
"y": 261.0668182373047,
"time": 1702536455205
},
{
"x": 938.763427734375,
"y": 275.0695037841797,
"time": 1702536455221
},
{
"x": 933.5555419921875,
"y": 287.5211639404297,
"time": 1702536455238
},
{
"x": 928.054443359375,
"y": 298.5670928955078,
"time": 1702536455255
},
{
"x": 921.485107421875,
"y": 307.7720489501953,
"time": 1702536455271
},
{
"x": 913.521728515625,
"y": 316.4197235107422,
"time": 1702536455288
},
{
"x": 905.4949951171875,
"y": 325.1339569091797,
"time": 1702536455305
},
{
"x": 896.376953125,
"y": 333.6233673095703,
"time": 1702536455321
},
{
"x": 885.5185546875,
"y": 342.4713592529297,
"time": 1702536455339
},
{
"x": 874.749755859375,
"y": 350.5452117919922,
"time": 1702536455356
},
{
"x": 863.4857177734375,
"y": 359.8206329345703,
"time": 1702536455370
},
{
"x": 852.8712768554688,
"y": 367.1151580810547,
"time": 1702536455391
},
{
"x": 841.2532958984375,
"y": 374.6466522216797,
"time": 1702536455404
},
{
"x": 829.65380859375,
"y": 381.0709991455078,
"time": 1702536455421
},
{
"x": 817.5537109375,
"y": 387.79103088378906,
"time": 1702536455437
},
{
"x": 805.4242553710938,
"y": 393.8605499267578,
"time": 1702536455454
},
{
"x": 793.5094604492188,
"y": 399.15431213378906,
"time": 1702536455472
},
{
"x": 782.9738159179688,
"y": 403.1088409423828,
"time": 1702536455489
},
{
"x": 772.8463745117188,
"y": 406.4949493408203,
"time": 1702536455504
},
{
"x": 764.2553100585938,
"y": 409.1325225830078,
"time": 1702536455522
},
{
"x": 756.42041015625,
"y": 411.1269073486328,
"time": 1702536455540
},
{
"x": 749.0506591796875,
"y": 413.7377471923828,
"time": 1702536455557
},
{
"x": 742.9489135742188,
"y": 416.42872619628906,
"time": 1702536455572
},
{
"x": 737.5338745117188,
"y": 418.4693145751953,
"time": 1702536455588
},
{
"x": 733.5607299804688,
"y": 420.4709014892578,
"time": 1702536455605
},
{
"x": 730.177734375,
"y": 422.4792022705078,
"time": 1702536455622
},
{
"x": 728.816650390625,
"y": 424.4844512939453,
"time": 1702536455638
},
{
"x": 728.80224609375,
"y": 427.1183624267578,
"time": 1702536455655
},
{
"x": 732.04443359375,
"y": 429.1317901611328,
"time": 1702536455671
},
{
"x": 739.4037475585938,
"y": 431.8090362548828,
"time": 1702536455688
},
{
"x": 752.61962890625,
"y": 435.11402893066406,
"time": 1702536455712
},
{
"x": 767.9056396484375,
"y": 437.7860870361328,
"time": 1702536455727
},
{
"x": 784.0560302734375,
"y": 439.1490020751953,
"time": 1702536455738
},
{
"x": 800.2537841796875,
"y": 441.17530822753906,
"time": 1702536455755
},
{
"x": 820.0858154296875,
"y": 443.8155059814453,
"time": 1702536455772
},
{
"x": 837.1102905273438,
"y": 445.79103088378906,
"time": 1702536455787
},
{
"x": 852.6246948242188,
"y": 447.1361846923828,
"time": 1702536455803
},
{
"x": 865.9520263671875,
"y": 449.1322784423828,
"time": 1702536455820
},
{
"x": 876.6416015625,
"y": 451.1309356689453,
"time": 1702536455844
},
{
"x": 886.6123046875,
"y": 453.1099395751953,
"time": 1702536455855
},
{
"x": 894.085205078125,
"y": 454.4803009033203,
"time": 1702536455871
},
{
"x": 899.9359130859375,
"y": 455.77760314941406,
"time": 1702536455888
},
{
"x": 904.62646484375,
"y": 458.4120635986328,
"time": 1702536455904
},
{
"x": 908.64892578125,
"y": 460.4477081298828,
"time": 1702536455920
},
{
"x": 908.71240234375,
"y": 460.4689483642578,
"time": 1702536455930
}
]
]希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~