渐变效果
1.在画布上创建一个渐变对象
var grd = context.createLinearGradient(x1,y1,x2,y2)
//线性渐变，方向为起始点（x1,y1）与结束点（x2,y2）两点连线的方向
var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2)
//径向渐变，方向为半径为r1的起始圆（x1,y1）与半径为r2的结束圆（x2,y2）的两条外切线方向
2.给渐变对象指定渐变颜色
addColorStop(position,color)//position:指定渐变颜色的位置（0-1）
3.将渐变对象作为画布对象的颜色
context.fillStyle = grd;
4.绘制矩形
context.fillRect(100,100,400,400)
代码示例：
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
<script type="text/javascript">
var context = document.getElementById("canvas").canvas.getContext("2d");
//1.创建扇形渐变对象
var grd = context.createRadialGradient(140,140,40,200,200,150);
//2.给渐变对象指定渐变颜色
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"gray");
//3.将渐变对象作为画布对象的颜色
context.fillStyle = grd;
//4.绘制矩形
context.fillRect(0,0,400,400);
</script>
绘制文字
1.属性
1）与css的font属性类似
context.font = "blod 斜体 大小 微软雅黑";
2）对齐方式
无论是水平方向对齐还是垂直方向对齐，都是基准线对齐，并不是文字对齐
-
水平对齐
//绘制文本的基线 context.beginPath(); context.moveTo(200,0); context.lineTo(200,400); context.stroke() textAlign = left/center/right left：基线在文本左侧 center：基线在文本中间 right：基线在文本右侧 -
垂直对其
//绘制文本的基线 context.beginPath(); context.moveTo(0,200); context.lineTo(400,200); context.stroke(); textBaseline= top/middle/bottom/alphabetic/hanging top：基线在文本上面 middle：基线在文本中间 bottom：基线在文本下面 alphabetical：字母基线（默认值） hanging：悬挂基线
2.方法
-
绘制空心文字
strokeText("text",x,y)//x,y是文字的左下角的坐标 -
绘制实心文字
fillText("text",x,y) -
返回指定文字的大小信息
measureText（"指定文本"）
设置阴影
1.使用CSS语法声明阴影颜色
context.shadowColor = "red";
2.接受一个数字，确定对象阴影的水平投射距离
context.shadowOffsetX = 5;
3.接受一个数字，确定对象阴影的垂直投射距离
context.shadowOffsetY = 4;
4.为阴影生成模糊效果
context.shadowBlur = 12;
绘制矩形和圆形
1.创建路径和绘制同时执行
context.fillRect(0,0,100,100);
2.使用路径创建图形
-
每次绘制新图形之前，都要先重新创建一个路径
beginPath() -
结束创建路径，主要用于让线条闭合
closePath()-
绘制矩形
context.beginPath(); context.rect(x,y,width,height); //x和y - 矩形的左上角 //width/height - 矩形的宽和高 context.fillStyle = "yellow"; context.fill(); -
绘制圆形
context.beginPath(); context.arc(x,y,radius,startAngle,endAngle,direction); //x/y - 设置圆心的坐标值 //radius - 圆形的半径 //startAngle - 开始位置 0 - 2*Math.PI //endAngle - 结束位置 0 - 2*Math.PI //direction - 方向：默认值为false，表示顺时针 context.closePath(); context.stroke();
-
