/images/me/haha.jpeg

canvas小案例:fly birds

我们可以看到这个游戏由背景蓝天,土地,小鸟,管道四部分组成,在开始游戏我们必须保证全部加载完所有图片资源,这里书写一个函数传进所有图片资源,

canvas画图API整理

canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 基本语法:

  1. 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
  2. 默认 canvas 的宽高为 300 和 150.
  3. 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
  4. 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
  5. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
  6. canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api. 基本使用方法:
  7. 获得 canvas 对象.
  8. 调用 getContext 方法, 提供字符串参数 ‘2d’.
  9. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
  10. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
  11. 基本绘图命令
    • 设置开始绘图的位置: context.moveTo( x, y ).
    • 设置直线到的位置: context.lineTo( x, y ).
    • 描边绘制: context.stroke().
    • 填充绘制: context.fill().
    • 闭合路径: context.closePath().

简述CSS3中的动画

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 在CSS3中的设置动画步骤: a、

CSS3里的flexbox布局

一般我们在页面中的布局都用浮动或是定位来解决,但是浮动的初衷是解决文字环绕图片的问题,但是现在CSS3中出现了flexbox布局,一个真正为