canvas渐变和canvas文本

图形渐变

在画布上创建一个渐变对象
var grd = context.createLinearGradient(x1,y1,x2,y2)

    x1,y1 - 基准线的起点坐标值
    x2,y2 - 基准线的终点坐标值
  
  var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2) 

   x1,y1 - 第一个基准圆的元素坐标值
   r1 - 第一个基准圆的半径

   x2,y2,r2同上

给渐变对象指定渐变颜色值
addColorStop(position,color)
```
position - 指设置渐变颜色的位置(0-1)
```
将渐变对象作为画布对象的颜色
context.fillStyle = grd;
绘制
context.fillRect(0,0,400,400);

canvas文本

canvas绘制文字

首先在body里创建canvas标签
<canvas id="canvas" width="400px" height="400px"></canvas>
第二步，在js里获取到canvas
var canvas = document.getElementById("canvas");
第三步，获取画布对象
var context = canvas.getContext("2d");

第四步，使用canvas的API绘制文字
//1.设置文本的样式
context.font = "bold 20px 微软雅黑";

//2.绘制文本
fillText(text,x,y);//x，y是文字左下角的位置

//水平对齐方式，值可以是left、right和center 
  textAlign
   //绘制文本的基准线
     context.beginPath();
     context.moveTo(200,0);
     context.lineTo(200,400);
     context.stroke();
    
     //注意：textAlign的值都指的是基准线相对与文本的位置，步骤是先通过文字确定基准线的位置，再将文字移动到相应的位置
     context.textAlign = "left/center/height";
// 文本基线,设置垂直方向对齐,值可以是top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）
  textBaseline用法参考textAlign

canvas-设置阴影

使用CSS语法声明阴影颜色
context.shadowColor = "aqua";
确定对象阴影的水平投射距离
context.shadowOffsetX = 5;
确定对象阴影的垂直投射距离
context.shadowOffsetY = 5;
为阴影生成模糊效果
context.shadowBlur = 12;

canvas-创建路径-绘制矩形和圆形

使用路径来创建图形
只要单独使用路径，就要有beginPath方法
// 初始化路径
context.beginPath();
// 绘制路径
context.rect(100,100,100,100);
context.fill();

设置圆形形状
/*arc(x,y,radius,startAngle,endAngle,direction)
 * x,y代表原点位置
 * radius 圆的半径
 * startAngle 开始角度
 * endAngle 结束角度
 * direction 方向 false代表顺时针，true代表顺时针
 */
  context.beginPath();
  context.arc(50,50,50,0,0.5*Math.PI,true);
  context.closePath();
  context.stroke();

直接绘制和路径绘制的区别
/* 直接绘制不需要beginPath()，路径绘制必须要beginPath()
* fillRect() = rect() + fill();
* 如果想要闭合空心半圆，使用closePath()
*/

最后编辑于：2017.12.05 02:07:43