NFH.005 - Canvas渐变与绘制

---

12.15学习经验分享#

Bruce_Zhu于2016.12.15

---

一、Canvas - 渐变

 
canvas 画图必要三步

1. 在body里创建好canvas标签，并设置好id属性
   

2. 在JS里通过DOM方式得到canvas
   

3. 通过.getContext()方法得到2d绘图画布
   

 
canvas 线性渐变

在canvas线性渐变方法.createLinearGradient(x1,y1,x2,y2)中:

x1,y1 ==> 基准线的起点坐标值
x2,y2 ==> 基准线的终点坐标值

所以我们在应该如下设置参数：

那么实现的效果就是如下图：

线性渐变

 
canvas 径向渐变
在canvas径向渐变的方法.context.createRadialGradient(x1,y1,r1,x2,y2,r2)中：

x1,y1,r1 ==> 第一个（也就是覆盖在最上方的）圆的x轴，y轴数值和半径
x2,y2,r2 ==> 第二个（也就是被覆盖的）圆的x轴，y轴数值和半径

所以我们在应该如下设置参数：

实现的效果如下图：

径向渐变

二、Canvas - 绘制

 
canvas 绘制文字

1、属性

1）与css的font属性类似，接受值也完全相同

   font

2）水平对齐方式，值可以是left、right和center

   textAlign

   //绘制文本的基准线
   context.beginPath();
   context.moveTo(200,0);
   context.lineTo(200,400);
   context.stroke();

3）文本基线,设置垂直方向对齐,值可以是top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）

   textBaseline

注意： 无论是水平方向对齐还是垂直方向对齐，都是基准线对齐，并不是文字对齐

2、方法

1）在指定位置绘制空心文字，后面的x,y指的是左下角的坐标

   strokeText(text,x,y)

2）在指定位置绘制实心文字

   fillText(text,x,y)

3）返回指定文字的大小信息

   measureText()

 
canvas 设置阴影

1、使用CSS语法声明阴影颜色

shadowColor

2、接受一个数字，确定对象阴影的水平投射距离

shadowOffsetX

3、接受一个数字，确定对象阴影的垂直投射距离

shadowOffsetY

4、为阴影生成模糊效果

shadowBlur

 
canvas 路径画图

1、标识方法

开始创建路径，每次绘制新图形之前，都要先重新创建一个路径

beginPath() 

结束创建路径，主要用于让线条闭合

closePath()

2、设置方法

设置矩形形状

rect(x,y,width,height) 

x和y - 矩形的左上角
width/height - 矩形的宽和高

设置圆形形状

arc(x,y,radius,startAngle,endAngle,direction)

x/y - 设置圆心的坐标值
radius - 圆形的半径
startAngle - 开始位置
endAngle - 结束位置
direction - 方向：默认值为false，表示顺时针