最近项目需求中要写较多H5小游戏，游戏本身体量不是很复杂，主要是承载较多业务逻辑，所以决定用canvas来完成游戏部分。之前只是知道H5中有canvas这个东西，也知道它大概是画图的，但具体怎么用，还是一无所知的。在MDN在看了一些相关资料，一口气也看了HTML 5 Canvas 核心技术和HTML5 2D 游戏编程核心技术，对canvas H5 游戏编程有了大致的了解，发现canvas游戏编程其实挺有趣的。目前也在学习webgl相关知识，打算把前端可视化这一块也深入学习。现在先记录一些自己认为canvas比较重要的知识，回顾和再学习。后续在记录webgl相关知识。

主要知识点

本系列主要深入学习canvas 2d编程中相关比较重要和基础的知识，算是对HTML 5 Canvas 核心技术这本书的读后感，大致知识点如下：

  1. 基础知识，学习如何绘制线段，图形，图片，文本等。
  2. 动画知识，学习如何用canvas实现简单的动画以及相关影响因素
  3. 碰撞检测，学习如何检测两个物体在运动过程中是否发生碰撞
  4. 2D游戏开发，学习用canvas开发2D游戏
  5. canvas相关小知识点

在学习过程中，最好是自己能动手实现，我就专门建了一个canvas demo的项目，里面都是自己在学习canvas时动手写的一些例子，感兴趣的可以去看看。

项目仓库地址：https://github.com/snayan/can...

demo预览地址：https://blog.snayan.com/canva...

我会按照上面的主要知识点，分篇幅来学习和回顾canvas 相关的核心技术。主要如下：

  • canvas核心技术-如何绘制线段
  • canvas核心技术-如何绘制图形
  • canvas核心技术-如何图片和文本
  • canvas核心技术-如何实现简单动画
  • canvas核心技术-如何实现复杂动画
  • canvas核心技术-如何实现碰撞检测
  • canvas核心技术-如何实现一个简单的2D游戏引擎
  • canvas核心技术-宽高，渐变，绘制真正1px线段
  • canvas核心技术-向量，三角函数

本文转载于猿2048:Canvas 核心技术

Canvas 核心技术的更多相关文章

  1. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  2. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  3. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  4. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

  5. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8

    第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...

  6. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7

    性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在 ...

  7. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf6

    操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含 ...

  8. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5

    文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:s ...

  9. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4

    CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform() ...

随机推荐

  1. JZ-067-剪绳子

    剪绳子 题目描述 给你一根长度为n的绳子,请把绳子剪成整数长的m段(m.n都是整数,n>1并且m>1,m<=n),每段绳子的长度记为k[1],...,k[m]. 请问k[1]x... ...

  2. git合并分支代码的方法

    1.先提交本地代码,防止被拉取其他分支的代码污染(self为自己的分支 other为想要拉取的分支) git add . git commit -m '备注信息' git push origin se ...

  3. PhpStrom 好用的翻译插件

    最近php使用laravel框架的比较多,里面的注释都是英文的,有些同学的英语不是很好,不过不用但是侯蜀黍带你一个好用的翻译插件,告别烦恼一了百了 Translation 翻译插件 安装: 打开Fil ...

  4. ubuntu 16.04和18.04 忘记登录密码的解决办法

    1:开机按Shift键,出现如下界面.(手速要快,Shift键要按时间久一点)选择第二项 2:按回车键进入如下界面,然后选中有recovery mode的选项(第三项) 3:按e进入如下界面,并找到图 ...

  5. LGP2414题解

    难不成是我后缀自动机学魔怔了,AC 自动机都能套上线段树 题意:给你一颗 Trie,每次询问两个节点 \(u,v\),\(u\) 代表的字符串在 \(v\) 代表的字符串中出现了多少次. 让我们思考一 ...

  6. LGP6011题解

    昨天考试考到了这道题,那就来补一下题解吧. 题意简单不再阐述. 首先删除之后还要向左移动,很容易想到 ODT 平衡树,这个过于一眼,不再阐述. 重点说第二种方法. 向左平移的这个操作,我们是否可以用别 ...

  7. Android 12(S) 图形显示系统 - BufferQueue的工作流程（八）

    题外话 最近总有一个感觉:在不断学习中,越发的感觉自己的无知,自己是不是要从"愚昧之巅"掉到"绝望之谷"了,哈哈哈 邓宁-克鲁格效应 一.前言 前面的文章中已经 ...

  8. Windows下载安装RabbitMQ教程-------报错卸载重新安装 （要卸载干净 -看下文）

    Could not update enabled plugins file at c:\Users\忙聸鹿忙聳掳忙聰戮\AppData\Roaming\RabbitMQ\enabled_plugins ...

  9. PF4J使用

    PF4J是一个Java轻量级的插件框架,可以实现动态加载,执行,卸载外部插件(支持jar以及zip),具体可以看官网:https://pf4j.org/. 本文例子基于Github地址:https:/ ...

  10. display 不同的值及他们的作用

    display 不同的值及他们的作用 常见 block 块元素类型,默认宽度为父元素宽度,可设置宽高,并独占一行 none 元素不显示,并从文档流中移除 inline 行内元素类型,默认宽度为内容宽度 ...