Canvas绘制文字
1、属性
1）与css的font属性类似，接受值也完全相同
font context.font = "20px red 微软雅黑";
2）水平对齐方式，值可以是left、right和center
textAlign
textAlign居中方式
1.绘制文本的区域，就是文本所占的那一块区域。假如一个文本所用的区域是20*20，此时居中来说对该文本没有任何意义。所以此时的居中并不是针对文字而是针对基线
2.如果是向右居中，逻辑如下
1）在紧挨文本的左侧画一条竖直方向的线
2）移动文本，让线处于文本的右边
3）其他水平居中方式同理
绘制文本的基准线
context.beginPath();
context.moveTo(200,0);
context.lineTo(200,400);
context.stroke();
3）文本基线,设置垂直方向对齐,值可以是top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）
textBaseline，和水平居中用法类似
注意： 无论是水平方向对齐还是垂直方向对齐，都是基准线对齐，并不是文字对齐
2、方法
1）在指定位置绘制空心文字，后面的x,y指的是左下角的坐标
strokeText(text,x,y)
2）在指定位置绘制实心文字
fillText(text,x,y)
3）返回指定文字的大小信息
measureText()，返回的是宽这里
Canvas设置阴影
1、使用CSS语法声明阴影颜色
shadowColor
2、接受一个数字，确定对象阴影的水平投射距离
shadowOffsetX
3、接受一个数字，确定对象阴影的垂直投射距离
shadowOffsetY
4、为阴影生成模糊效果
shadowBlur 直接写数字
Canvas创建路径，绘制矩形和圆
1、标识方法
开始创建路径，每次绘制新图形之前，都要先重新创建一个路径
beginPath()
结束创建路径，主要用于让线条闭合
closePath()
直接绘制图形和用路径绘制图形的区别
直接绘制不需要调用beginPath()
使用路径绘制必须调用beginPath()
fillRect() => rect()+fill()
2、设置方法
设置矩形形状
rect(x,y,width,height)
x和y - 矩形的左上角
width/height - 矩形的宽和高
设置圆形形状
arc(x,y,radius,startAngle,endAngle,direction)
x/y - 设置圆心的坐标值
radius - 圆形的半径
startAngle - 开始位置 使用角度
endAngle - 结束位置 使用角度 Math.PI
direction - 方向：默认值为false，表示顺时针,true表示逆时针
3、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//创建路径和绘制同时执行
context.fillRect(0,0,100,100);
/*
使用路径来创建图形
注意：只要单独使用路径，就要使用beginPath()方法
*/
//初始化路径
context.beginPath();
//绘制路径
context.rect(100,120,200,100);
context.fillStyle = "yellow"
context.stroke();//context.fill();
context.beginPath();
context.rect(100,300,100,100);
context.fillStyle = "red"
context.fill();
context.beginPath();
/*
* arc
* arc(x,y,radius,startAngle,endAngle,direction)
* x,y 原点位置
* radius 半径
* startAngle,endAngle 开始和结束角度
* direction false代表顺时针 true代表逆时针
*/
context.arc(160,60,50,0,Math.PI/2,true);
context.fillStyle = "yellow";
//闭合路径
context.closePath()
context.stroke();
</script>
</body>
</html>
效果图.png
网友评论