vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue uniapp使用canvas

Vue和uniapp中该如何使用canvas详解

作者:无·糖

说起canvas是css3新增的标签,而饼状图又是canvas经典,我们公司现在正在用uni-app框架去研发APP,下面这篇文章主要给大家介绍了关于Vue和uniapp中该如何使用canvas的相关资料,需要的朋友可以参考下

Vue与uniapp中如何使用canvas?

一般Vue情况下我们使用canvas是这样使用的

//创建canvas元素
<canvas
      id="output_mini"
      width="1400"
      height="790"
      style="display: block;position: absolute;top:0;"
      />
      
//找到canvas元素
const canvas = document.getElementById("output_mini");
      
//创建context对象
this.context = canvas.getContext("2d");

//然后画线段画圆等操作
ctx.moveTo(0,0);  //定义开始坐标(0,0)
ctx.lineTo(200,100); //结束坐标 (200,100)
ctx.stroke(); // stroke() 方法来绘制线条:

但是在uniapp中,不能像上面这样直接创建context对象。需要通过uniapp官方提供的方法来创建context对象,之后在进行其他的操作。

示例

//创建canvas元素
<canvas canvas-id="output_mini" width="400" height="360" style="display: block;position: absolute;top:0;" 

//创建context对象
var ctx = uni.createCanvasContext('output_mini', this);

属性说明

属性名类型说明
typeString指定 canvas 类型,支持 2d (2.9.0) 和 webgl
canvas-idStringcanvas 组件的唯一标识符
disable-scrollBoolean当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
hidpiBoolean是否启用高清处理
@touchstartEventHandle手指触摸动作开始
@touchmoveEventHandle手指触摸后移动
@touchendEventHandle手指触摸动作结束
@touchcancelEventHandle手指触摸动作被打断,如来电提醒,弹窗
@longtapEventHandle手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
@errorEventHandle当发生错误时触发 error 事件,detail = {errMsg: ‘something wrong’}

注意事项:

总结

到此这篇关于Vue和uniapp中该如何使用canvas的文章就介绍到这了,更多相关Vue uniapp使用canvas内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文