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）设置起点坐标值 

        moveTo(x,y);  

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

       lineTo(x,y);

绘制线条的属性

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

效果：