文本对齐水平对齐textAligncontext.textAlign="center|end|left|right|start";其中各值及意义如下表。值描述start默认。文本在指定的位置开始。end文本在指定的位置结束。center文本的中心被放置在指定的位置。left文本左对齐。right文本右对齐。我们通过一个例子来直观的感受一下。<!DOCTYPE html><html lang="zh"><
文本API简介今天我们开始征战一个全新的内容——HTML5 Canvas的文本API！要知道，艺术家通常同时也是一个书法家，所以我们要学习写字，而且是写出漂亮的字。是不是很有意思？好了，先预告一下Canvas 文本API有哪些。
变换矩阵之前三节所说的坐标变换的三种方式——平移translate()，缩放scale()，以及旋转rotate()都可以通过transform()做到。在介绍矩阵变换transform()前，我们来说一说什么是变换矩阵。以上是Canvas中transform()方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为context.transform(a,b,c,d,e,f)。
缩放变换scale()缩放变换scale(sx,sy)传入两个参数，分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实，看上去简单，实际用起来还是有一些问题的。我们来看一段代码。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>缩放变换</title> <style>
旋转变换rotate()同画圆弧一样，这里的rotate(deg)传入的参数是弧度，不是角度。同时需要注意的是，这个的旋转是以坐标系的原点（0，0）为圆心进行的顺时针旋转。所以，在使用rotate()之前，通常需要配合使用translate()平移坐标系，确定旋转的圆心。即，旋转变换通常搭配平移变换使用的。
图形变换从今天开始，我们就开始谈一谈图形变换。图形变换是指用数学方法调整所绘形状的物理属性，其实质是坐标变形。所有的变换都依赖于后台的数学矩阵运算，所以我们只要使用变换的功能即可，无需去理解这些运算。
bezierCurveTo()方法绘制三次贝塞尔曲线代码如下。context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);这个方法可谓是绘制波浪线的神器。根据之前的结论，n阶贝塞尔曲线就有n-1个控制点，所以三次贝塞尔曲线有1个起始点、1个终止点、2个控制点。因此传入的6个参数分别为控制点cp1 (cp1x, cp1y)，控制点cp2 (cp2x, cp2y)，与终止点 (x, y)。
贝塞尔曲线Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。
arcTo()介绍arcTo()方法接收5个参数，分别是两个切点的坐标和圆弧半径。这个方法是依据切线画弧线，即由两个切线确定一条弧线。具体如下。arcTo(x1,y1,x2,y2,radius)这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到(x1, y1)点的直线相切，圆弧的终点与(x1, y1)点到(x2, y2)的直线相切。因此其通常配合moveTo()或lineTo()使用。
高级路径今天开始，我们就要征战路径最后也是最难的部分了——高级路径。之前我们学习的都是绘制线条（基本路径），接下来的四节课我们详细看看绘制曲线（高级路径）的有关方法。剧透一下，主要有四个方法：标准圆弧：arc()复杂圆弧：arcTo()二次贝塞尔曲线：quadraticCurveTo()三次贝塞尔曲线：bezierCurveTo()在开始之前，我们优化一下我们的作图环境。
createPattern()简介纹理其实就是图案的重复，填充图案通过createPattern()函数进行初始化。它需要传进两个参数createPattern(img,repeat-style)，第一个是Image对象实例，第二个参数是String类型，表示在形状中如何显示repeat图案。可以使用这个函数加载图像或者整个画布作为形状的填充图案。有以下4种图像填充类型：平面上重复：repeat;x轴上重复：repeat-x;
艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。填充颜色主要分为两种：基本颜色渐变颜色（又分为线性渐变与径向渐变）我们一个个来看。填充基本颜色Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如:context.fillStyle = "red";
线条属性概述线条的属性共有以下四个：1、lineCap属性lineCap 定义上下文中线的端点，可以有以下 3 个值。butt：默认值，端点是垂直于线段边缘的平直边缘。round：端点是在线段边缘处以线宽为直径的半圆。square：端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。2、 lineJoin属性lineJoin 定义两条线相交产生的拐角，可将其称为连接。
使用closePath()闭合图形首先我们用上节课的方法绘制一个矩形。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>绘制矩形</title><
绘制折线上一节中，我们已经成功绘制了一条线段。那么，如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢？聪明的小伙伴肯定已经想到了，这还不简单，复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>绘制折线</title></head>
怎么画线段？上一讲我们已经得到了咱们的画布和画笔，在发挥艺术家之魂前，还是要像小孩牙牙学语一样，我们也得从画一条线段开始。因为画线段是最简单的，最基础的。但是别小看了它。下面是我从度娘那里找到的一个由线条组成的图像。是不是很有魔性？言归正传。怎么画线条？
添加一个Canvas在HTML中添加Canvas非常简单，只需要在HTML的<body>部分，添加上<canvas>标签就可以了！可以参考下面的代码。<!doctype html><html lang="zh"><head><meta charset="UTF-8"><title>基础的HTML5页面</title> </head><body> <canvas id="canvas">
前言今后的一个月内会连载详细的Canvas教程，从零基础开始，到Canvas API，再到基本动画与高级动画的实现，还会介绍视音频的处理、移动应用，最后如果有时间会扩展说一说3D、多人应用、游戏制作等。所以本课程虽说是Canvas教程，但其实就是详细的介绍Canvas API，之后基于Canvas实现其他更高级的功能。如果你学过HTML4，或者CSS、Javascript，那么相信你入手起来会很快；
谢谢您的支持！也欢迎您订阅本书。如果书中有疏漏或错误之处，敬请您指出，期待您的pull request。如果有任何疑问也可以发送issue。本人邮箱：airing@ursb.me本人博客：http://ursb.me本书地址：http://airingursb.gitbooks.io/canvas本书github：https://github.com/airingursb/canvas
关注时代Java
