则在X=5，Y=5的坐标系中画出一个145*145的矩形，如下图：
如果不指定颜色，默认的是使用黑色去填充整个矩形。可以使用fillStyle方法为矩形指定颜色或其他样式，比如可以充分利用CSS 3中的opacity透明度属性，比如如下的代码，分别画了三个矩形，每个矩形的下半部分都使用了样式形成了半透明效果：
其中rgba中比传统的rgb多了a，即透明度的含义，a的值也是0到1之间的数字，0表示完全透明，1则是完全不透明。运行结果如下图：
接下来学习如何绘制圆(弧)，绘制用到的方法如下：
画圆或者圆弧。x,y为圆心坐标，radius为半径，startAngle,endAngle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆(True为逆时针，False为顺时针)。
注意这里的角度为弧度制，所以如果画一个正圆的话，是Math.PI * 2，而画60°的话，就是60 * Math.PI / 180，比如下面的代码，用fill样式填充了一个黑色的正圆：
如果要用stroke笔来勾画圆形的话，只需要指定勾画的样式strokeStyle即可，如下代码：
下面是一个画弧度的代码例子：
结果如下图：
接下来，我们学习如何画贝塞尔曲线。HTML 5的API中，有一个画这个曲线的很容易的方法bezierCurveTo，相关参数介绍如下：
bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)：为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点，而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候，当前的位置为 (x, y)。下面是相关代码：
绘画的图形如下图：
由于有了贝塞尔曲线功能的，因此可以绘制很多不同的图形了，比如下面的代码绘制出一个简单的笑脸图。
显示结果如下图：
目前为止，我们使用的fillStyle都是使用一种单独的颜色去填充图形，而实际上，fillStyle也支持使用多种颜色去填充，比如下面的例子，随机生成了各种颜色去填充画布实现了彩虹的效果：
如果不想使用以上的方法去生成渐变颜色，可以使用如下的canvas提供的几个方法去简便实现渐变效果：
addColorStop(offset, color) –addColorStop 方法接受 2 个参数，offset参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值
createLinearGradient(x0, y0, x1, y1) –该方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x0, y0, r0, x1, y1, r1) – 该方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
下面的代码演示了使用渐变的效果：
实现的效果如下图：
原文：
【编辑推荐】
相关文章
精彩导读
热门资讯
关注我们
