微信小程序画布画布组件介绍和基本用法

本文主要介绍canvas组件的介绍和基本用法。在组件中绘制固定线。

我们来看看canvas组件：

Wxml:'blassIdErrorCallback'bindtouchend='EventHandle'boundtouchstart='EventHandleStart'show-id='myCanvas'class='myCanvas'disable_scroll=''＆gt;注意：

canvas标记的默认宽度为300px，高度为225px。同一页面中的canvas-id不可重复。如果使用已经出现的canvas-id，则对应于canvas标记的画布将被隐藏，不再起作用。 disable_scroll属性可以阻止画布移动。当有手势事件时，禁止屏幕滚动和下拉刷新

Wxss:

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

让我们来看看js如何在汽车上运作。

//test.jsPage（{data: {}，onLoad: function（）{}，onReady: function（）{var my_carvas=wx.createCanvasContext（'myCanvas'，this）//1。为后续创建一个car实例对象使用my_carvas.setStrokeStyle（'red'）//设置边框颜色.my_carvas.moveTo（20,100）//设置绘图路线的起点（20,100）＆gt;＆gt;＆gt;（当前画布的x轴） object，当前画布对象Y轴）my_carvas.lineTo（120,100）//添加一个新点并创建一条从最后指定的点到目标的线汇海。（120,100）＆gt;＆gt;＆gt;（当前canvas对象的axis，current画布对象的y轴）my_carvas.stroke（）//绘制当前路径的边框。默认颜色为黑色.my_carvas.draw（）//绘制描述（路径，变形） ，样式）以前在绘图上下文中在画布中。}}）设置起点和终点，绘制一条直线如图所示:(从左到右100像素）

Canvas标签属性：

帆布。

属性名称类型默认值描述canvas-idStringcanvas组件的唯一标识符disable-scrollBooleanfalse当在画布中移动并且存在绑定手势事件时，禁用屏幕滚动和下拉刷新bindtouchstartEventHandle手指触摸动作启动bindtouchmoveEventHandle手指触摸后移动bindtouchendEventHandle手指触摸动作结束bindtouchcancelEventHandle手指触摸动作被中断，如调用提醒，弹出窗口bindlongtapEventHandle手指长按500ms后触发，触发长按事件移动不会触发屏幕滚动binderrorEventHandle触发错误事件发生错误时，detail={ errMsg:'出错了'}

注意：Bug＆amp;提示

tip: canvas组件是由客户端创建的本机组件，具有最高级别的层次结构，不能由z-index控制。提示:不要在scroll-view，swiper，picker-view和move-view中使用canvas组件。提示: css动画对canvas组件无效。错误:避免设置过大的宽度和高度，Android下会出现崩溃

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。