canvas绘制透明的图片_游戏开发之旅-JavaScript绘制图形

本节是第四讲的第二十二小节，上一节课为大家介绍了Ajax技术，包括XmlHttpRequest对象和FetchAPI的基本用法，本节为大家继续介绍JavaScript绘制图形的方法(Canvas API)，有关WebGL的实例请参见视频课程的内容。

网络图形

我们来讨论 HTML 的 多媒体和嵌入式 模块，早先的网页只有单调的文字，后来才引入了图像，起初是通过 元素的方式，后来出现了类似于 background-image 的 CSS 属性和 SVG 图像等方式。然而，这还不够好。当你能够使用 CSS 和 JavaScript 让 SVG 矢量图动起来时，位图却依然没有相应的支持。同时 SVG 动画的可用工具也少得可怜。有效地生成动画、游戏画面、3D场景和其他的需求依然没有满足，而这些在诸如 C++ 或者 Java 等低级语言中却司空见惯。当浏览器开始支持 HTML 画布元素 和相关的 Canvas API(由苹果公司在 2004 年前后发明，后来其他的浏览器开始跟进)时，形势开始改善。下面你会看到，canvas 提供了许多有用的工具，特别是当捆绑了由网络平台提供的一些其他的 API 时。它们用来生成 2D 动画、游戏画面和数据分析图，以及其他类型的 app。

2D画布基础

以下是绘制图形的基础代码：

var canvas = document.querySelector('.myCanvas');

var width = canvas.width = window.innerWidth;

var height = canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0, 0, 0)';

ctx.fillRect(0, 0, width, height);

所有绘画操作都离不开 CanvasRenderingContext2D 对象(这里叫做 ctx)。许多操作都需要提供坐标来指示绘图的确切位置，如下图所示，画布左上角的坐标是(0, 0)，横坐标(x)轴向右延伸，纵坐标(y)轴向下延伸。

简单矩形<