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

我们先相识一下canvas组件:
wxml:
<canvas binderror="canvasIdErrorCallback" bindtouchend="EventHandle" bindtouchstart="EventHandleStart" canvas-id="myCanvas" class="myCanvas" disable_scroll=""></canvas
注:
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 中。。。。
}
})
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的问题
KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。KESION 一直通过手艺立异,,,,,,提供产品和服务,,,,,,助力企业向数字化转型,,,,,,通过科技驱动商业刷新,,,,,,让商业变得更智慧!
微信小程序在开发中怎样引用外部icon?? 首先在阿里巴巴矢量图标库添加需要的icon,,,,,,点击下载至外地 然后在下载的工具里找到这个文件iconfont.css 在自己的小程序里建一个iconfont.w
微信之父张小龙在年头的那次演讲中曾体现:“我自己是许多年的程序员,,,,,,我以为我们应该为开发的团队做一些事情”。。。。几个月后,,,,,,微信正式推出微信应用号(即微信 小程序 ),,,,,,...