HTML5(五)——Canvas API

====

canvas 画布提供了一个画图的平面空间范围，每个点都有自己的坐标，原点位于画布的左上角，x表示横坐标，y表示纵坐标。

2.1 绘制路径

• ctx.beginPath - 开始绘制路径

• ctx.moveTo( x,y ) - 设置路径起点

• ctx.lineTo( x,y ) - 绘制一条线到(x,y)点

• ctx.closePath - 闭合图形

• ctx.stroke - 对路径进行着色

• ctx.fill - 对路径进行填充

eg：绘制一条线宽为5像素的红色线条，代码如下：

var canvas = document.getElementById(“mycanvas”);

var ctx = canvas.getContext(“2d”)

ctx.beginPath();

ctx.moveTo(0,0)

ctx.lineTo(400,400)

ctx.lineWidth = 5

ctx.strokeStyle = “red”

ctx.stroke()

eg：绘制一个绿色三角形，代码如下：

var canvas = document.getElementById(“mycanvas”);

var ctx = canvas.getContext(“2d”)

ctx.beginPath();

ctx.moveTo(0,0)

ctx.lineTo(400,400)

ctx.lineTo(0,400)

ctx.closePath()

ctx.lineWidth = 5

ctx.strokeStyle = “red”

ctx.stroke()

ctx.fillStyle = “green”

ctx.fill()

2.2 绘制矩形

• ctx.rect(x,y,width,height) - 绘制矩形路径

• ctx.strokeRect(x,y,width,height) - 绘制矩形

• ctx.fillRect(x,y,width,height) - 绘制填充矩形

• ctx.clearRect(x,y,width,height) - 清除矩形区域

上述绘制矩形的方法中均有四个参数，其中x,y表示矩形的左上角顶点，也算起点，width、height 为矩形的宽高。strokeRect 与 strokeStyle 配合使用，fillRect 与 fillStyle 配合使用。

eg：绘制一个带有红色边框的矩形，代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(‘2d’)

ctx.strokeStyle=“red”;

ctx.strokeRect(100,100,200,100)

上述 stroke 替换成fill便可绘制一个红色矩形。

2.3 绘制圆形 / 弧

• ctx.arc(x,y,radius,start,end,anticlockwise) - 绘制圆形或扇形

上述的参数中，x,y 表示圆心的坐标，radius 是半径，start 开始弧度，end 结束弧度，anticlockwise 表示是否是逆时针。

eg：绘制一个带有红色描边的黑色圆，代码如下：

2.4 绘制文本

• strokeText(string,x,y) - 绘制空心文字

• fillText(string,x,y) - 绘制实心文字

上述两个方法均带有三个参数，第一个 string 是需要绘制的内容，x,y 是文字的位置，需要注意的是 y 坐标是以文字的基线处开始算距离的，并非是文字顶部。文字的其他样式可通过 font 属性设置，与 css 的 font 类似。

eg：绘制实心的文字，并设置文字加粗、大小20像素是微软雅黑字体。代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(‘2d’)

ctx.fillStyle=“red”;

ctx.font = “bold 40px 微软雅黑”

ctx.fillText(“我爱前端”,100,100)

注意：绘制文本的时候无法换行，如果需要换行的时候就需要多次绘制文字，达成换行目的。

2.5 设置渐变色

• createLinearGradient(x1,y1,x2,y2) - 设置渐变色

其中 x1,y1 表示起点，x2,y2 表示终点，通过不同坐标可控制渐变方向。

eg：给文字设置渐变色，代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(‘2d’)

var grd = ctx.createLinearGradient(0,0,400,400)

grd.addColorStop(0,“#4dffff”)

grd.addColorStop(1,“#8e12aa”)

ctx.fillStyle=grd;

ctx.font = “bold 40px 微软雅黑”

ctx.fillText(“我爱前端”,100,100)

2.6 设置阴影

• shadowOffsetX - 设置水平位移

• shadowOffsetY - 设置垂直位移

• shadowBlur - 设置模糊度

• shadowColor - 阴影颜色

eg：制作一个带有阴影的矩形，代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(“2d”)

ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 5

ctx.shadowBlur = 10;

ctx.shadowColor = “rgba(0,0,0,0.5)”

ctx.fillStyle=“red”

ctx.fillRect(0,0,200,100);

后话

---

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。