微信小程序开发之——时钟-Canvas介绍(1)(2)

| bindtouchstart | eventhandle | 手指触摸动作开始 |

| bindtouchmove | eventhandle | 手指触摸后移动 |

| bindtouchend | eventhandle | 手指触摸动作结束 |

| bindtouchcancel | eventhandle | 手指触摸动作被打断，如来电提醒，弹窗 |

| bindlongtap | eventhandle | 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 |

| binderror | eventhandle | 当发生错误时触发 error 事件，detail = {errMsg} |

三 Canvas用法示例(新/旧)

---

3.1 Canvas用法示例—旧

3.1.1 布局文件(index.wxml)

3.1.2 逻辑文件(index.js)

onReady: function () {

//1- 使用 wx.createContext 获取绘图上下文 context

var context = wx.createCanvasContext(‘firstCanvas’)

//2-设置填充色

context.setFillStyle(‘red’)

//3-绘制图形形状

context.fillRect(0,0,150,150)

//4-开始绘制

context.draw()

},

3.1.3 效果图

3.2 Canvas新用法示例—Canvas 2D

3.2.1 布局文件(index.wxml)

3.2.2 逻辑文件(index.js)

onReady: function () {

const query = wx.createSelectorQuery() //返回一个 SelectorQuery 对象实例

query.select(‘#myCanvas’) //查询myCanvas对应的Canvas

.fields({ node: true, size: true }) //节点，可用 .node()代替

.exec((res) => { //回调结果

const canvas = res[0].node //canvas

const ctx = canvas.getContext(‘2d’) //上下文

ctx.fillStyle = ‘#f00’ //设置填充颜色

ctx.fillRect(0, 0, 150, 150) //绘制形状(x,y,width,height)

})

},

3.2.3 效果图

3.3 Canvas新用法示例—WebGL

3.3.1 WebGL入门——初识 WebGL

WebGL基础知识学习

3.3.2 小程序中-布局文件(index.wxml)

3.3.3 样式文件(index.wxss)

canvas{

width: 150px;

height: 150px;

最后，面试前该准备哪些资源复习？

其实客户端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一下我面试期间的复习路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《Android开发七大模块核心知识笔记》

《960全网最全Android开发笔记》

《379页Android开发面试宝典》

历时半年，我们整理了这份市面上最全面的安卓面试题解析大全
包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。

《507页Android开发相关源码解析》

只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。

真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
oid，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。

真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！