填色小游戏

[{"insert":"前景提要：1、图片要下载为本地图片则需要使文件接口“保存图片至相册”功能，又由于该功能不能在纯web/h5中生效"},{"insert":{"image":"//file3.ih5.cn/v35/files/4c7a6eb2b3d3f28d47feff92af7428f0_16444_556_115.png"}},{"insert":"，所以本案例可以采用小程序；2、因为涉及到画布自定义图案形状及打印画布，而小程序中只能简单打印画布，故本案例需在小程序中加入H5的webview页面（企业版小程序才能使用webview），把画布效果做在H5中。\n\n1、在H5案例中添加画板，插入地图背景图（可实现手动编辑地图形状），使用多边形工具“编辑形状功能”"},{"insert":{"image":"//file3.ih5.cn/v35/files/f41ceea9baf79a83729264675c8a5663_13459_702_154.png"}},{"insert":"\n以单击鼠标左键的方式绘制多边形区域（注意：锚点超过20个可能导致绘制区域保存不成功，后期工具会更新锚点限制数量），请尽量简化绘制过程\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/28aa2b8849f670c966559be905d67195_148598_805_501.png"}},{"insert":"\n\n2、扩展组件中有“调色板”，地图的上色通过绑定调色板的当前值来实现"},{"insert":{"image":"//file3.ih5.cn/v35/files/36cdf5eac07e1246a272eb4655485b77_14842_319_261.png"}},{"insert":"\n\n3、打印画布，保存图片。小程序和H5之间通过连接来实现数据的传递。打印画布时注意提前检测小程序是否对保存到相册的功能进行授权。已经授权则直接打印，未授权需要先进行授权处理\n\n4、小程序中网页组件的地址：如果要预览编译小程序，内嵌网页要改成自己H5案例的预览地址；发布成体验版或上架，内嵌的网页要用H5案例的上架地址。否则连接组件不能成功接收消息"},{"insert":{"image":"//file3.ih5.cn/v35/files/7a8fed33ee4fe9181cc21ca35cf3fae6_52594_1339_296.png"}},{"insert":"\n"}]

[{"insert":"用多边形制作填色小游戏，添加一个黑白的地图，上面覆盖透明的多边形，每个多边形可以单独填色。最终的填色结果，可以打印画布，然后通过文件接口，下载为本地图片。\n（demo案例仅做技术说明使用，找一个色块相对少的底图即可，多边形组件，有上传底图参考的功能个，可以通过那个功能来完美描边）\n"}]