找回密码
 立即注册

扫一扫,访问微社区

查看: 7176|回复: 4

今天有点忙,撸了个片段--Canvas 练手(贪吃蛇的入门版)

  [复制链接]
发表于 2017-3-17 12:52:32 | 显示全部楼层 |阅读模式
说点:  今年情人节,本来想撸个有意思的demo动画,无奈写了大半天的公司文案,下午才有时间撸个片段出来。 这个demo比较简单,不多说。


老规矩,上图为敬:

实现原理:  
比较简单,通过绘制两条三阶贝塞尔曲线即可绘制爱心图形, 但如何实现粒子逐个显示呢?  
其实很简单,通过第一篇文章我们很容易获取贝塞尔曲线上每个点的坐标值, 我们绘制运动轨迹第一个点时调用ctx.draw()方法,后续所有点都采用ctx.draw(true)方法即可实现粒子逐个显示。 其中的参数true官方文档有说明,如下:  
          "reserve        Boolean        非必填。本次绘制是否接着上一次绘制,即reserve参数为false,则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制;若reserver参数为true,则保留当前画布上的内容,本次调用drawCanvas绘制的内容覆盖在上面,默认 false"  

  
举一反三:
练习了这个demo,是不是感觉 贪吃蛇小游戏是不是这种套路啊 ?!




游客,如果您要查看本帖隐藏内容请回复

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

245

回帖

63

金钱

新人求带

积分
0
发表于 2017-8-21 09:14:45 | 显示全部楼层
感谢分享
回复

使用道具 举报

0

主题

12

回帖

108

金钱

新人求带

积分
0
发表于 2017-9-22 10:13:07 | 显示全部楼层
回复

使用道具 举报

0

主题

1

回帖

17

金钱

新人求带

积分
0
发表于 2017-11-10 16:59:54 | 显示全部楼层
-Canvas
回复

使用道具 举报

0

主题

353

回帖

830

金钱

新人求带

积分
0
发表于 2020-4-14 16:36:51 | 显示全部楼层
我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-11-22 14:27 , Processed in 0.130184 second(s), 32 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表