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 id="d1" width="500" height="500"></canvas>
<script type="text/javascript">
    var canvas=document.getElementById("d1");//获取canvas对象
    var context=canvas.getContext("2d");  //获取 “ 画笔 ”
    context.font="20px 微软雅黑";  //设置字体
    context.shadowColor="#64B9D2";//阴影的颜色
    context.shadowOffsetX="10px"; //水平投射距离
    context.shadowOffsetY="10px"; //垂直投射距离
    context.shadowBlur="12";      //模糊程度
    context.fillText("今天是个好天气",100,20);
</script>   

效果

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 id="d1" width="500" height="500"></canvas>
<script type="text/javascript">
    var context=document.getElementById("d1").getContext("2d");
    //大圆
    context.beginPath();
    context.arc(210,210,200,0,2*Math.PI);
    context.stroke();
    context.closePath();
    //左边的大黑半圆
    context.beginPath();
    context.arc(210,210,200,0.5*Math.PI,1.5*Math.PI);
    context.fill();
    context.closePath();
    //上面的左边半圆
    context.beginPath();
    context.arc(210,110,100,0.5*Math.PI,1.5*Math.PI);
    context.fillStyle="white";
    context.fill();
    context.closePath();
    //上面的小黑圆
    context.beginPath();
    context.arc(210,110,33,0,2*Math.PI);
    context.fillStyle="black";
    context.fill();
    context.closePath();
    //下面的右边半黑圆
    context.beginPath();
    context.arc(210,310,100,Math.PI,(3/2*Math.PI),true);
    context.fill();
    context.closePath();
    //下面的小白圆
    context.beginPath();
    context.arc(210,310,33,0,2*Math.PI);
    context.fillStyle="white";
    context.fill();
    context.closePath();
</script>

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();

效果：

---

未完待续····
下一篇：<a href="http://www.jianshu.com/p/1987e3256e8f" id="da">canvas - 绘制图片 </a>