Canvas
分享
扫一扫
文章平均质量分 90
用Canvas结合面向对象，编写各种游戏，提高逻辑能力，加深面向对象编程理念。
每个逻辑都有详细的介绍。
优惠券已抵扣
余额抵扣
还需支付
¥39.90
¥99.00
购买须知?
本专栏为图文内容，最终完结不会低于15篇文章。
订阅专栏，享有专栏所有文章阅读权限。
本专栏为虚拟商品，基于网络商品和虚拟商品的性质和特征，专栏一经购买无正当理由不予退款，不支持升级，敬请谅解。
锋利的二丫
这个作者很懒，什么都没留下…
展开
-
Canvas基础绘制例子三-躁动的小球
Canvas基础绘制例子三-躁动的小球本篇用 Canvas 结合面向对象的编程思想来绘制一个小的效果，主要是初步感受面向对象的更多用处。可以看完这篇之后再去看贪吃蛇大作战。一、小球跳动版1.1 效果图1.2 分析通过效果图我们能看出来，小球是一个类，每个小球都有半径、颜色、初始位置、x/y 方向的速度等属性。在绘制刚开始时，我们要生成若干个小球，并且为它的属性赋初值。用计时器不断地绘制若干小球，在绘制的过程中，改变每个小球的位置，并且在改变位置时，做碰壁反弹的处理（碰壁反弹原理原创 2021-05-24 11:05:36 · 240 阅读 · 0 评论 -
Canvas 基础绘制例子二-贝塞尔曲线工具
Canvas 基础绘制例子二-贝塞尔曲线工具博主微信号 -GuanEr-。Canvas 提供的基础绘制函数绘制出的形状都是比较标准的，如果我们想要用 Canvas 绘制出一个非标准形状的形状，比如任意形状的椭圆，我们就需要使用贝塞尔曲线去绘制。在使用贝塞尔曲线工具时，我们要知道一个曲线的控制点位置，才能绘制出对应的曲线，我们可以根据我们的绘制习惯，制作出一个贝塞尔曲线工具，然后利用这个工具去获取任意曲线的控制点位置。一、效果图二、思路为了能让我们的工具更贴近生活，我们可以将画布的中心点设置成原创 2021-05-21 10:17:27 · 643 阅读 · 3 评论 -
Canvas 基础绘制例子一
Canvas 基础绘制例子一这个系列本来准备出很多 Canvas 系列游戏，但是想到有很多朋友对于 Canvas 怎么动态高效的使用还不是很熟悉，所以我把之前授课过程中讲的Canvas的所有基础教程的例子出个文档（不包含基础函数的介绍，这些在任何简易教程中都有）。这个基础教程包含 Canvas 基础绘制练习，动态绘制，结合面向对象的使用等等。以下示例中，所有画布宽均为1000，高均为600，只在 1.2 的代码示范中给出 HTML 和 CSS 代码，之后的示例就不重复了。一、Canvas 绘制网格背原创 2021-05-20 15:21:34 · 315 阅读 · 0 评论 -
Canvas烟花效果 HTML代码烟花特效源代码
Canvas 烟花效果一个非常简陋的没什么含金量的小效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #cv { background: #000; } <原创 2020-08-11 11:09:52 · 17075 阅读 · 0 评论 -
Canvas 扫雷
我就写了核心基础逻辑HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #cv { display: block; marg...原创 2019-10-23 17:17:48 · 6725 阅读 · 4 评论 -
Canvas 贪吃蛇大作战
阅读需知这个游戏是给小白练手的，大神请饶命只有一条蛇，别说我骗你目的是为了练习 JS + Canvas 的逻辑代码虽然不难，但由于本人能力有限，所以计算过程还是有一丢烧脑，所以 … 谁抄咬谁，转载啥的，注明出处效果蛇的小眼睛看到了吗，很 Q 有没有代码如下html:<!DOCTYPE html><html lang="en"><head>...原创 2019-10-09 17:44:29 · 5264 阅读 · 9 评论