12.15学习经验分享#
Bruce_Zhu于2016.12.15
一、Canvas - 渐变
canvas 画图必要三步
- 在body里创建好canvas标签，并设置好id属性
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
</pre> - 在JS里通过DOM方式得到canvas
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
</script>
</pre> - 通过.getContext()方法得到2d绘图画布
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
// 如果通过jQuery方式获取到canvas时，需要将jQuery对象转换成DOM对象
// $("#canvas")[0].getContext("2d");
// $("#canvas").get(0).getContext("2d");
// $("#canvas").eq(0)[0].getContext("2d");
var context = canvas.getContext("2d");
</script>
</pre>
canvas 线性渐变
在canvas线性渐变方法.createLinearGradient(x1,y1,x2,y2)中:
x1,y1 ==> 基准线的起点坐标值
x2,y2 ==> 基准线的终点坐标值
所以我们在应该如下设置参数：
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
var context = canvas.getContext("2d");
// 实现线性渐变效果
// 1.获取渐变对象
// 后面的参数有两种功能，设置渐变的方向，设置渐变的范围
var grd = context.createLinearGradient(200,100,200,400);
// 2.设置渐变的颜色
grd.addColorStop(0,"red");
grd.addColorStop(0.3,"yellow");
grd.addColorStop(1,"blue");
// 3.将需要填充的颜色添加到渐变对象上
context.fillStyle = grd;
// 4.画图
context.fillRect(0,0,canvas.height,canvas.width);
</script>
</pre>
那么实现的效果就是如下图：
canvas 径向渐变
在canvas径向渐变的方法.context.createRadialGradient(x1,y1,r1,x2,y2,r2)中：
x1,y1,r1 ==> 第一个（也就是覆盖在最上方的）圆的x轴，y轴数值和半径
x2,y2,r2 ==> 第二个（也就是被覆盖的）圆的x轴，y轴数值和半径
所以我们在应该如下设置参数：
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
var context = canvas.getContext("2d");
// 实现渐变效果
// 1.获取渐变对象
// 后面的参数有两种功能，设置渐变的方向，设置渐变的范围
var grd = context.createLinearGradient(200,100,200,400);
// 2.设置渐变的颜色
grd.addColorStop(0,"red");
grd.addColorStop(0.3,"yellow");
grd.addColorStop(1,"blue");
// 3.将渐变对象赋值给填充颜色
context.fillStyle = grd;
// 4.画图
context.fillRect(0,0,canvas.height,canvas.width);
</script>
</pre>
实现的效果如下图：
二、Canvas - 绘制
canvas 绘制文字
1、属性
1）与css的font属性类似，接受值也完全相同
font2）水平对齐方式，值可以是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，表示顺时针
