最近项目需求中要写较多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. Chapter08 面向对象（中级）

    Chapter08 面向对象(中级) 8.1 IDEA的使用 1. 快捷键 删除当前行, 默认是 ctrl + Y 自己配置 ctrl + d 复制当前行, 自己配置 ctrl + alt + 向下光 ...

  2. JZ-013-调整数组顺序使奇数位于偶数前面

    调整数组顺序使奇数位于偶数前面 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对 ...

  3. Spring入门笔记简要

    总览:https://www.processon.com/view/link/605b14ab5653bb2225e6b0c5 一.Spring 1.概述 1.spring框架简介 ​ 为简化企业级开 ...

  4. Jmeter-根据负载计算并发用户实际案例

    业务场景 假设公司领导现在给你分配了一个性能测试需求如下: 1:公司有1000人在上班时间段会登录平台进行打卡操作,可能会登录打卡多次2:业务高峰时间段在8:00-8:30,半小时3:需要保证90%用 ...

  5. linux echo用法和实例

    echo命令用于在shell中打印shell变量的值,或者直接输出指定的字符串.linux的echo命令,在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的,因此有必要了解下 ...

  6. 微信小程序断网处理

    wx.onNetworkStatusChange(function callback) 参数 function callback 网络状态变化事件的回调函数 参数 Object res 属性 类型 说 ...

  7. CF416E题解

    题意:对于所有的 \((u,v)\),询问有多少条边在这两个点的最短路边集之并内. 考虑对于每一个 \(u\) 建立最短路 DAG 图,问题变成询问唯一的度数为 \(0\) 的节点到所有节点路径的并集 ...

  8. LGP5142题解

    题意简明,不说了( 因为教练让同学们做线段树的题,早就会了线段树的我就来爆踩水水蓝了/kk 首先推一下柿子: \[\frac 1 n\sum_{i=1}^n(a_i^2-2 \times a_i \t ...

  9. vue3-动态组件的要点

    <!--动态组件--> <!--缓存,只缓存about和home组件--> <keep-alive exclude="about" > < ...

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

    题外话 我竟然已经写了这个系列的十一篇文章了,虽然内容很浅显,虽然内容很枯燥,虽然内容也许没营养,但我为自己的坚持点赞! 一.前言 前面的两篇文章,分别讲解了Producer的处理逻辑和queue b ...