【微信小程序之画布】一：canvas组件

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

此文章主要是对canvas组件的介绍与基本的使用。在组件中绘画了一条固定的直线。

我们先了解一下canvas组件：

wxml:

<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' binderror="canvasIdErrorCallback" disable_scroll/>

注：

canvas 标签默认宽度300px、高度225px
同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
disable_scroll属性可以禁止画布在移动时且有手势事件时，禁止屏幕滚动以及下拉刷新

wxss:

.myCanvas{border: 1px solid; //给一个边框
}

看一下效果：

咱们看一下js中是怎么对carvas操作的

//test.js
Page({data: {},onLoad: function () {},onReady:function(){var my_carvas = wx.createCanvasContext('myCanvas', this) //1.创建carvas实例对象，方便后续使用。my_carvas.setStrokeStyle('red') //设置边框颜色。my_carvas.moveTo(20,100)  //设置绘画路线的起点 （20,100）>>>（当前画布对象的 x 轴，当前画布对象的 y 轴）my_carvas.lineTo(120, 100)  //增加一个新点，然后创建一条从上次指定点到目标点的线。（120,100）>>>（当前画布对象的 x 轴，当前画布对象的 y 轴)my_carvas.stroke()  //画出当前路径的边框。默认颜色色为黑色。my_carvas.draw()   //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。}
})

设置起点与终点，绘画一条直线如图：(由左至右100个像素点)

canvas标签属性：

画布。

属性名	类型	默认值	说明
canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle		手指触摸动作开始
bindtouchmove	EventHandle		手指触摸后移动
bindtouchend	EventHandle		手指触摸动作结束
bindtouchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

注意事项：Bug & Tip

tip: canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。
tip: css 动画对 canvas 组件无效。
bug: 避免设置过大的宽高，在安卓下会有crash的问题

【微信小程序之画布】一：canvas组件相关推荐

微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序之画布绘制并管理多张图片
在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片.文字等等进行操作,比如移动一下,旋转一下或者缩放等等.但普通的画布 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
【微信小程序之画布】三：手指触摸绘画椭圆
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 功能:根据手指触摸绘画一个椭圆路径--> 起点为手指开始触摸时的坐标,终点为手指触摸结束时的坐标 ...
uni.canvasToTempFilePath在app正常，微信小程序报错: fail canvas is empty
问题描述: 在微信小程序使用uni.canvasToTempFilePath,画布可以画出图像,但是生成图片临时路径报错:fail canvas is empty . 问题分析: uni.canvas ...

【微信小程序之画布】一：canvas组件

承接微信小程序开发。扫码加微信。

正文：

【微信小程序之画布】一：canvas组件相关推荐

最新文章

热门文章