Canvas应用程序下载指南：学习Canvas绘制各式图形技巧-夫唯发布外链网

HTML5规范已问世多时，然而Canvas元素似乎并未在众多场合中得到广泛应用。一个关键因素是，Canvas规范尚未完全稳定，不适合大规模应用于生产环境。然而，Canvas的优势也十分显著，比如在绘制包含大量元素的图表时，SVG因性能问题常常无法胜任。例如，我曾目睹一次技术交流会上的抽奖环节，虽然视觉效果很炫，但由于每个头像都是DOM元素，通过CSS3动画控制，导致性能十分低下。此外，随着硬件性能的提升，视频截图、图像处理等功能也逐渐能够在网页上实现。大多数网站仍在使用Flash，但Flash在Mac电脑上的性能不佳，还需要学习额外的知识。Canvas则是直接通过JavaScript进行绘图，对Mac系统友好，因此可以视为Flash的继承者。

运用Canvas
以上所述，Canvas究竟是什么？

在英文中，Canvas的意思是“画布”，但这里的Canvas是指HTML5中新引入的一个元素，开发者可以在其上绘制一系列图形。Canvas在HTML文件中的写法非常简单：

其中id属性是所有HTML元素都可以使用的，Canvas自带的属性只有后面两个（分别控制宽度和高度），没有其他属性。至于兼容性，CanIUse网站已经说明了，基础功能目前90%的浏览器都支持，所以大部分情况下可以放心使用。

注意，一定要使用Canvas自带的width和height属性，不要使用CSS来控制，因为CSS控制会导致Canvas变形。可以试着与Photoshop进行对比，后者是改变“图像大小”，前者才是正确的改变“画布大小”。例如下图是三张图片的横向拼接：最左边的黑框中是大小为50px50px的原图；中间是改变了图像大小为100px100px的效果，图像变得模糊，但对于图像本身来说坐标范围并没有变大；最右边才是正确的100px*100px的Canvas。

Canvas的大部分绘图方法都与标签无关，需要使用JavaScript对其进行操作，这就是所谓的Canvas API。

我们首先获取到这个元素：
var canvas = document.getElementById('canvas');
然后通过一个方法来获取可以调用所有Canvas API的入口：
var ctx = canvas.getContext('2d');
看到2d，是否很激动地联想到有没有3d呢？没有3d的写法，但若想开启3D世界的大门，则可以写canvas.getContext('webgl')。然而WebGL是基于OpenGL ES 2.0的一套标准，与本文完全不同，因此这里就不讨论了。

Canvas中的基本概念
坐标
与数学上常见的笛卡尔坐标系不太相同，Canvas的坐标系是计算机中常见的坐标系，其形状如下：
画布的最左上角是(0,0)，向右x增大，向下y增大，且x和y都是整数（即使在计算过程中不是整数，在绘制时也会当作整数处理），单位是像素。

绘图
带大家回顾一下。不知道有多少同学小时候玩过Logo语言，在其中你可以控制一只小海龟在一块板子上行走、画画、提笔、落笔。Canvas中也一样，你需要控制一只画笔的移动和绘制。然而Canvas更高级一些，你可以直接利用一些函数来画图，无需去控制那只画笔的位置。

Canvas中的基本图形
通过上文定义的ctx变量可以完成许多有趣的事情，我们先看看如何绘制一些基本图形。

线条
我们指定画笔移动到某一点，然后告诉画笔需要从当前这一点画到另一点。我们可以让画笔多次移动、绘制，最后统一输出到屏幕上。例子如下：
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.moveTo(10, 20);
ctx.lineTo(40, 70);
ctx.stroke();
上面的代码中，lineTo是产生线条用的函数，执行完之后画笔就移到了线条的终点。需要注意的是，线条此时并没有显示在屏幕上，必须调用stroke才会显示。这样设计是有道理的，因为向屏幕上输出内容需要耗费大量的资源，我们完全可以先攒够一波lineTo，最后用stroke放一个大的。

路径
绘制路径非常简单，只需要先告诉ctx一声“我要开始画路径了”，然后通过各种方法（例如lineTo）绘制路径。如果需要画一个封闭路径，那就最后告诉ctx一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用stroke输出到屏幕上。

一个简单的例子：
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();

如果我不想只描绘路径线条，而是想填充整个路径呢？可以将最后一行的stroke改成fill，这样就跟使用了画图中的油漆桶一样，封闭路径里面的内容就都被填充上颜色了：
ctx.fill();

弧/圆形
绘制弧的函数参数比较多：
ctx.arc(圆心x坐标,圆心y坐标,半径,起始角度,终止角度,是否为逆时针);

注意，在Canvas的坐标系中，角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图，确定了圆心、起始角度（图中标明的锐角）和终止角度（图中标明的钝角），方向为逆时针，于是就有了这么一个弧。如果方向为顺时针，那么就会是一个跟它互补的、非常非常大的弧……

所以如果转了2π圈之后，弧就成了圆形，因此也可以使用绘制弧的方式来绘制圆形：
ctx.beginPath();
ctx.arc(圆心x坐标,圆心y坐标,半径, 0, Math.PI* 2, true);
ctx.closePath();

ctx.closeCurve();

末尾的参数随意填写（当然也可以不填），因为无论是顺时针还是逆时针，转了2π圈之后都是一个圆。
矩形
若只想绘制一个横平竖直的矩形，可以使用以下两个方法：
//仅描边
ctx.strokeRect(左上角 x坐标,左上角 y坐标,宽度,高度);
//仅填充
ctx.fillRect(左上角 x坐标,左上角 y坐标,宽度,高度);
线条样式/填充样式
之前绘制的所有图形均为黑色，但Canvas远不止这一种颜色（否则制定标准的人会被骂得很惨）。实际上，Canvas可以单独设置线条样式和填充样式，分别使用的是strokeStyle和fillStyle。可能的值有三种：纯色、渐变、图像。既然线条样式与填充样式的使用方法相同，那么以下以填充样式为例。若要设置线条样式，只需将所有的fillStyle改为strokeStyle即可，参数保持不变。
/纯色填充/
//普通颜色
ctx.fillStyle='#0000ff';
//带透明度的颜色
ctx.fillStyle='rgba(64, 0, 127, 0.5)';
/渐变填充/
//设置渐变的尺寸（参数分别为起始点的 x和 y、终止点的 x和 y）
var gradient= ctx.createLinearGradient(0, 0, 170, 0);
//设置过渡色，第一个参数是渐变的位置，第二个参数是颜色
gradient.addColorStop(0,'magenta');
gradient.addColorStop(0.5,'blue');
gradient.addColorStop(1.0,'red');
//设置填充样式
ctx.fillStyle= gradient;
/图片填充/
//创建图片
var image= new Image;
image.src='/path/to/image.png';
//创建图片笔触，可以指定图片的平铺方式，这里是横向平铺
var pattern= ctx.createPattern(image,'repeat-x');
//设置笔触填充
ctx.fillStyle= pattern;
关于渐变，除了代码中提到的线性渐变以外，还有createRadialGradient，即径向渐变。
设置完填充样式后，就可以使用fill来填充了！若设置的是线条样式，则可以使用stroke来描边。
当然，对于线条样式，还有一个额外的方法叫lineWidth，可以用来控制线条的宽度。
文字
要在画布上绘制文字，首先需要知道所使用的字体和字号：
ctx.font='30px Verdana';
然后就可以通过strokeText或fillText来对字体描边或填充文字。
ctx.strokeText("Hello Coding!", 23, 33);
ctx.fillText("Hello Coding!", 23, 66);
图片
在Canvas中绘制图片有三种方法：
//指定绘制位置
ctx.drawImage(image, x, y);
//指定绘制位置和图像宽高
ctx.drawImage(image, x, y, width, height);
//指定剪裁区域、绘制位置和图像宽高
ctx.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);
参数的含义依次如下：
image:要使用的Image、Canvas或Video
sx:可选，开始剪切的x坐标
sy:可选，开始剪切的y坐标
swidth:可选，被剪切图像的宽度
sheight:可选，被剪切图像的高度
x:在画布上放置图像的x坐标
y:在画布上放置图像的y坐标
width:可选，要使用的图像的宽度
height:可选，要使用的图像的高度
画布设置
细心的同学可能会发现，之前有些属性是直接对ctx变量进行设置，例如ctx.lineWidth，一旦设置，那么后续画出的线条都会是这个宽度。
实际上，Canvas的设置项还有很多，例如我们可以直接移动画布、旋转画布、设置全局的绘制透明度等等。这些设置还可以随时保存和恢复。
需要注意的是，所有已经画在画布上的东西，一旦确定后，无论之后再次进行任何设置都不会再改变。这很像Windows下的画图程序。
不多说，直接上代码：
//移动画布，其实就是移动坐标系
ctx.translate(向右移动的量,向下移动的量);
//旋转画布，旋转中心为坐标系原点
ctx.rotate(顺时针旋转的角度);
//以坐标系原点为中心缩放画布
ctx.scale(横向放大倍数,纵向放大倍数);
//设置绘制透明度，如果fillStyle等属性设置了透明度则会叠加
ctx.globalAlpha(零到一的小数);
//设置全局组合操作
ctx.globalCompositeOperation='lighter';
//保存当前设置
ctx.save();
//恢复上次保存的设置
ctx.restore();
移动、旋转、缩放实际上是在控制绘图的坐标系，如果你在调用这三个方法的时候，脑子里时刻有一个带刻度的坐标系，效果会非常好。
实际上，Canvas的坐标变换遵循计算机图形学的知识：变换矩阵。简单来说，一个坐标可以看作是一个矩阵，坐标所对应的矩阵乘上变换矩阵就可以实现对坐标的变换。为了提高计算效率，可以先计算出几种变换复合之后的变换矩阵，然后直接通过transform函数对当前坐标系进行变换，或者通过setTransform函数将坐标系重置为初始状态后再进行变换。至于变换矩阵的内容，对于本文来说就有些超纲了。
全局组合操作有点像Photoshop里面的“混合选项”，具体的实现方式还没有完全确定，目前常见浏览器都统一了的实现方式有：source-over、source-atop、destination-over、destination-out、lighter、xor。具体的行为可以看Mozilla官方文档，但是由于标准还未完全确定，因此其它浏览器不保证所有的行为都跟Mozilla的标准一致。一般来说，比较常见的是source-over和lighter两种，这两种的标准在浏览器界也算是无可争议的。
至于保存和恢复设置就有点有趣了，首先需要了解一个叫“栈”的东西。

关于保存和还原设置这部分，实际上颇具趣味。首先，必须弄明白一个名为“栈”的概念。

栈是一种一维数组，仅允许从单一方向进行操作。初始状态下，栈为空，我们可以向数组这个方向压入元素，同时也只能从这个方向取出最后一个元素（栈顶元素），除此之外没有其他操作。当然，取出的次数不能超过压入的次数，因为取出到栈底时，栈中已经没有元素了，此时再取出就没有意义了。栈的用途广泛，例如括号匹配、表达式计算、深度优先搜索，以及绝大多数语言的函数调用都需要用到栈。

每次调用 save 函数，实际上是将当前的全局设置压入了一个专门的栈中，每次调用 restore 函数时，将最后保存的内容取出并用它覆盖当前的全局设置，这样栈顶就是最近一次保存的内容了。保存和还原在某些情况下非常有用，例如我需要画一个歪着的图形，然后继续画正着的图形，这样就可以先调用 save，然后调用 rotate，画完图形之后再还原回来，继续画其他的图形。

实际上，Canvas还有很多方法，例如 toDataURL 可以直接将当前画布上的内容转换为十六进制的 data-url，getImageData 可以直接将图像转换为 RGBA 数组以供图像处理算法使用，putImageData 可以将 RGBA 数组转换为图片显示在画布上等等。如果配合 JavaScript 的定时更新（最好使用 requestAnimationFrame 而不是 setInterval），则可以产生动画效果。网上还有很多 Canvas 的库，可以让程序员更轻松地基于 Canvas 编写自己的特效或功能。在此我想说一句话：大家的想象力有多丰富，Canvas 的能力就有多强大~

在线设计海报的网站-国外知名的海报设计网站
在线图片简单设计网站有哪些？
canvas
腾讯推出的一款在线图片设计工具，该网站提供了各种图片设计的模板工具，你只需选择一个模板，然后修改文案、调整素材，就可以完成图片设计，非常简单方便。
点击“模板中心”，你就可以看到各种不同类型的图片模板，包括信息图、自媒体、活动推广、营销图等，种类非常丰富。
MAKA
H5在线创作、海报制作、模板素材设计分享平台，H5已经成为移动端营销的主要方式之一，对于非专业人士来说，常常借助一些H5在线创作平台快速制作H5页面。本期，我们来看看H5在线创作、海报制作平台：MAKA。
对于设计新手来说，在MAKA上可以直接使用平台提供的模板便捷修改，进行二次创作，快速生成自己的作品。操作起来也非常方便，打开MAKA在线编辑器，对选定的精美模板进行替换或修改，轻轻拖拽即可进行图文替换编辑，还可在模板中添加文字、图片、音乐等元素，创作完成后即可分享。
Fotor懒设计
随着微信公众号、淘宝店、创业公司、自媒体等各类团队的发展，越来越多的人开始有了制作广告图、活动宣传图片、文章配图、海报等平面设计需求。但对于设计新手来说，学习PS、AI等专业软件，或者聘请专业设计师，都有一定门槛。
Fotor懒设计提供了适用于各种尺寸和应用场景的设计模板，包括国内外的主流社交媒体配图、电商平台配图，以及各种广告banner、朋友圈邀请函、海报设计等。
用户可以根据设计需求，选择所需尺寸，然后从Fotor的海量模板素材中挑选合适的进行设计。
图帮主
图帮主是一款满足大众设计需求的一款便捷在线设计神器，对于新手来说可以很快地上手。图帮主适合众多行业、多个场景，可以帮助用户轻松上传自己的图片，拖拉拽、秒出图，5分钟即可完成设计。
国外知名的海报设计网站？
AllPosters:在线艺术品交易平台
AllPosters:在线艺术品交易平台是一个在线艺术品销售站点，提供插画、海报、绘画、造型艺术等产品的销售业务，在这里你可以购买到来自世界各地的艺术作品。
Ilustremagazine:艺术设计杂志
Ilustremagazine:艺术设计杂志是一款艺术设计网络杂志网站，提供很多海报、插画等设计。
PixMac:图片市场交易平台
PixMac:图片市场交易平台是一家捷克正版图片交易平台，提供照片、插画（矢量图或位图）等，适用于网站、宣传横幅、海报、幻灯片、杂志、广告等，无需注册即可直接购买。
有做海报素材的网站推荐吗？
1、Chuangkit
Chuangkit()是一个很老牌的在线作图网站了，有超多素材和模板可供挑选，PC端和移动端都可以编辑和使用，非常便捷。（我个人一直都用它）2、Canva