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();
效果：
未完待续····
下一篇：<a href="http://www.jianshu.com/p/1987e3256e8f" id="da">canvas - 绘制图片 </a>
