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 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>
最后编辑于：2017-12-05 02:01
