目录Vue与uniapp中如何使用canvas?示例属性说明注意事项:总结Vue与uniapp中如何使用canvas? 一般Vue情况下我们使用canvas是这样使用的 //创建ca
一般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);
属性名 | 类型 | 说明 |
---|---|---|
type | String | 指定 canvas 类型,支持 2d (2.9.0) 和 webGL |
canvas-id | String | canvas 组件的唯一标识符 |
disable-scroll | Boolean | 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新 |
hidpi | Boolean | 是否启用高清处理 |
@touchstart | EventHandle | 手指触摸动作开始 |
@touchmove | EventHandle | 手指触摸后移动 |
@touchend | EventHandle | 手指触摸动作结束 |
@touchcancel | EventHandle | 手指触摸动作被打断,如来电提醒,弹窗 |
@longtap | EventHandle | 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 |
@error | EventHandle | 当发生错误时触发 error 事件,detail = {errMsg: ‘something wrong’} |
到此这篇关于Vue和uniapp中该如何使用canvas的文章就介绍到这了,更多相关Vue uniapp使用canvas内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue和uniapp中该如何使用canvas详解
本文链接: https://www.lsjlt.com/news/170074.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0