HTML5 Canvas动态绘图需五步：一、创建canvas元素并用getContext('2d')获取上下文；二、用fillRect/strokeRect/clearRect绘矩形；三、用beginPath/moveTo/lineTo/closePath/stroke或fill绘路径；四、用arc绘圆弧，角度为弧度；五、用quadraticCurveTo/bezierCurveTo绘贝塞尔曲线。
如果您希望在网页中动态绘制图形，HTML5 Canvas 提供了直接的绘图 API。以下是使用 Canvas 绘制基本图形的具体操作步骤：
一、创建Canvas元素并获取上下文
Canvas 是一个无内容的 HTML 元素，必须通过 JavaScript 获取其 2D 渲染上下文才能进行绘图操作。该上下文是所有绘图方法的入口点。
1、在 HTML 文件中添加 标签，并设置 width 和 height 属性以定义绘图区域尺寸。
2、使用 document.getElementById() 获取该 canvas 元素。
立即学习“前端免费学习笔记（深入）”；
3、调用元素的 getContext('2d') 方法，返回一个 CanvasRenderingContext2D 对象。
二、绘制矩形
Canvas 提供三种矩形绘制方式：填充矩形、描边矩形和清除矩形。它们均基于左上角坐标、宽度和高度定义区域。
1、调用 fillRect(x, y, width, height) 绘制实心矩形，颜色由 fillStyle 属性控制。
2、调用 strokeRect(x, y, width, height) 绘制空心矩形，轮廓颜色由 strokeStyle 控制。
3、调用 clearRect(x, y, width, height) 清除指定区域，使其变为透明。
三、绘制路径图形（线段、三角形、多边形）
路径是 Canvas 中绘制复杂形状的基础机制，需显式开始路径、定义点、闭合路径，再执行描边或填充。
1、调用 beginPath() 初始化新路径。
2、使用 moveTo(x, y) 将绘图起点移至指定坐标。
3、使用 lineTo(x, y) 添加直线段到目标点。
本文档主要讲述的是Android游戏开发之旅；今天Android123开始新的Android游戏开发之旅系列，主要从控制方法(按键、轨迹球、触屏、重力感应、摄像头、话筒气流、光线亮度)、图形View(高效绘图技术如双缓冲)、音效(游戏音乐)以及最后的OpenGL ES(Java层)和NDK的OpenGL和J2ME游戏移植到Android方法，当然还有一些游戏实现惯用方法，比如地图编辑器，在Android OpenGL如何使用MD2文件，个部分讲述下Android游戏开发的过程最终实现一个比较完整的游戏引擎
4、调用 closePath() 自动连接当前点与起始点形成闭合图形。
5、调用 stroke() 描边路径，或 fill() 填充路径内部。
四、绘制圆形与圆弧
Canvas 使用 arc() 方法定义圆弧路径，通过起始角、终止角和方向参数可绘制完整圆、扇形或弧线。
1、调用 beginPath() 开始新路径。
2、调用 arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise)，其中角度单位为弧度，anticlockwise 为布尔值（false 表示顺时针）。
3、使用 stroke() 或 fill() 渲染该弧线路径。
4、若需绘制实心圆，将 startAngle 设为 0，endAngle 设为 Math.PI * 2。
五、绘制贝塞尔曲线
贝塞尔曲线适用于创建平滑弯曲路径，Canvas 支持二次和三次贝塞尔曲线，分别由一个或两个控制点决定曲率。
1、调用 beginPath() 启动路径。
2、使用 quadraticCurveTo(cpx, cpy, x, y) 绘制二次贝塞尔曲线，含一个控制点。
3、使用 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制三次贝塞尔曲线，含两个控制点。
4、调用 stroke() 显示曲线轨迹。
