canvas绘制文字、矩形、圆形、线条

canvas绘制文字

1、属性

• context.font=" " 里面的值与css的font属性类似；
• context.textAlign="left/right/center"
  文本的水平对齐方式： 文本的第一个字的左下角
• context.textBaseline=" "
  值可以是top、middle、bottom、alphabetic（默认值，字母基线）、hanging（ 悬挂基线）
  文本的垂直对齐方式： 文本的第一个字的左上角

2、绘制方法

• 在指定位置绘制空心文字，后面的x,y指的是左下角的坐标
  strokeText(text,x,y)
• 在指定位置绘制实心文字
  fillText(text,x,y)
• 返回指定文字的大小信息
  measureText()

3、canvas-设置阴影

• 使用CSS语法声明阴影颜色
  shadowColor
• 接受一个数字，确定对象阴影的水平投射距离
  shadowOffsetX
• 接受一个数字，确定对象阴影的垂直投射距离
  shadowOffsetY
• 为阴影生成模糊效果
  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，表示顺时针

太极图

我们来看下太极的绘制过程

canvas-创建路径绘制线条(直线和折线、多边形)

1. 绘制方法

 1）设置起点坐标值 

        moveTo(x,y);  

 2）设置终点(折点)坐标值

       lineTo(x,y);

2. 绘制线条的属性

 1）设置线条的宽度，默认1px

       lineWidth

 2）设置线条端点的形状

       lineCap 
           butt - 平角
           round - 圆角
           square - 正方向

 3）设置两条线交点的形状

       lineJoin
           miter - 尖角 
           round - 圆角
           bevel - 斜角 

 4）miterLimit - 配合lineJoin使用

      ineJoin设置为miter，该属性值设置尖角延伸范围   

示例：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//线条宽度
context.lineWidth = 10;
//线条颜色
context.strokeStyle = "#cd2828";
 
//第一条直线,默认方头
context.moveTo(50, 50);
context.lineTo(250, 50);
context.stroke();
 
//第二条直线,使用圆头
context.beginPath();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.lineCap = "round";
context.stroke();
 
//第三条直线,使用加长方头
context.beginPath();
context.moveTo(50, 150);
context.lineTo(250, 150);
context.lineCap = "square";
context.stroke();

效果：

---

未完待续····
下一篇：canvas - 绘制图片