小程序踩的坑

众所周知,canvas是前端一个非常牛叉的分支,很多酷炫的动画都可以用它来做,最近博主就得到了一个需求,在小程序上做了一个弧形可拖动的进度条(因为博主之前一直做得是商城,所以刚上手时真的一脸茫然,幸亏皇天不负有心人,我还是做出来了),好的话不多说进入主题

1.把canvas作为子组件使用

前言:

本次功能踩的坑----
1.canvas只能在首页加载,如果想让他作为子组件存在的话就需要把他转为base46图片,然后渲染到页面上；

2.canvas属于原生组件,在小程序中的样式层级是最高的(哪怕你别的元素z-index等于1兆都没用),是没有办法通过z-index来控制的;

3因为我的小程序是弧形的进度条,所以拖动的运行轨迹就很重要了,所以又去了解了下Math.atan2的角度计算方式,如果有想了解的同学可以借鉴快速通道

正文

1. 我的小程序使用的是uniapp的框架,所以你们可以去官网查canvasToTempFilePath这个API,他的功能就是把canvas转化为base46的图片**快速通道** ；

2. 他的作用也很直接,前两个参数(x,y)是表示你将从画布的那个位置开始截取,并把它转为图片(必填)；

3. 参数(width,height)是标识画布的大小的作用(可以简单的理解为图片截取的结束位置),默认值是整个canvas的大小(选填) ；

4. 参数(destWidth,destHeight)表示的是输出的图片的大小,这个总是会用同学好奇导出来的图片清晰度不高的好奇,这里就是重点了,你可以把这两个参数的值*2(必填)；

5. 接下来直接上图: