最近项目需求中要写较多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. vue项目如何引用jquery

    虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery,那么如何引入jquery呢? 费了半天劲,记录一下: 一 : 安装jquery npm instal ...

  2. redis存储token

    redis存储token 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章http://www.javaman.cn/sb2/redis-token 在实际开发中,token需要保 ...

  3. selenium+python操作浏览器

    前面已经把环境搭建好了,下面我们就正式学习selenium的webdriver框架.本篇主要讲如何用Python调用webdriver框架的API,对浏览器做一些基本的操作,如打开.前进.后退.刷新. ...

  4. Laravel-QueryList-采集

    <?php namespace App\Http\Controllers; use App\Models\NewsModel; use Illuminate\Http\Request; use ...

  5. 面试题 正则表达式 验证邮箱 Pattern.matches

    故事背景 今天面试遇到这道题,对正则表达式还是有些懵,面试完回家复盘实现一下.这里使用到了 Pattern 这个类来校验正则表达式. 正则表示式分析: ^([a-z0-9A-Z]+[-|\\.]?)+ ...

  6. linux下hadoop2.6.1源码64位的编译

    linux下hadoop2.6.1源码64位的编译 一. 前言 Apache官网上提供的hadoop本地库是32位的,如果我们的Linux服务器是64位的话,就会现问题.我们在64位服务器执行Hado ...

  7. K8S原来如此简单（三）Pod+Deployment

    上篇我们已经安装好k8s1.23集群,现在我们开始使用k8s部署我们的项目 Pod Pod 是一组容器集合,是可以在 Kubernetes 中创建和管理的.最小的可部署的计算单元.这些容器共享存储.网 ...

  8. python3生成10个成绩列表，求其平均分

    import random alist = [random.randint(45,101) for _ in range(10)] #在[45.101)之间生成10个随机数 print(alist) ...

  9. docker是干什么的，docker常用命令

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.百度百科 Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖到一个可移植的镜像中,然后发布到任何流行的Linux或Win ...

  10. ZYNQ生成一个工程的基本步骤

    Zynq 7000 SoC 是业界首款All Programmable SoC 组成: PL(FPGA部分) PS(ARM部分) PL和PS数据传输的 高效接口:AXI和ACP PS: 处理系统(Pr ...