12
微信小程序开发实战（17）：用画布画一张笑脸
source link: https://blog.csdn.net/nokiaguy/article/details/107805235
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
微信小程序开发实战（17）：用画布画一张笑脸
小程序的画布允许绘制基础的图形，如直线、圆等。画布需要使用<canvas>标签，例如，下面的布局代码使用了<canvas>标签定义了一个300*200的画布。
<canvas style="width: 300px; height: 200px;" canvas-id="mycanvas"></canvas>
在<canvas>标签中使用了一个重要的属性canvas-id，该属性用于指定画布的ID，同一个页面，不能存在两个或两个以上相同ID的画布。
我们可以通过下面的JavaScript代码在画布上绘制一个笑脸。
当系统装载时，会调用onReady函数，在该函数中利用context绘制相应的图形，最后通过wx.drawCanvas方法指定要在哪个画布上绘制图像，绘制的效果如图1所示。
图 1 画布演示效果
其中wx.drawCanvas方法的第二个参数actions指定当前绘制行为使用到的设置绘制风格的一些函数，如果将context.getActions方法返回的信息输出到Console，会看到如图2所示的日志信息。
图2 context.getActions方法输出的日志信息
对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：
关注 极客起源 公众号，获得更多免费技术视频和文章。
蒙娜丽宁
公众号：极客起源
达芬奇
UM
更多精彩内容请关注微信公众号：「极客起源」，东北大学计算机专业硕士。UnityMarvel创始人，企业内训讲师、IT畅销书作者，CSDN学院讲师，拥有多年软件开发经验和培训经验。主要著作包括《Python从菜鸟到高手》、《Python爬虫技术：深入理解原理、技术与开发》，培训企业学员数千人。制作在线课程数千小时。更多视频课程，请访问我的B站：https://space.bilibili.com/477001733
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK