漸變效果
1.在畫布上創(chuàng)建一個漸變對象
var grd = context.createLinearGradient(x1,y1,x2,y2)
//線性漸變，方向為起始點（x1,y1）與結(jié)束點（x2,y2）兩點連線的方向
var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2)
//徑向漸變，方向為半徑為r1的起始圓（x1,y1）與半徑為r2的結(jié)束圓（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.創(chuàng)建扇形漸變對象
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）對齊方式
無論是水平方向?qū)R還是垂直方向?qū)R，都是基準線對齊，并不是文字對齊
-
水平對齊
//繪制文本的基線 context.beginPath(); context.moveTo(200,0); context.lineTo(200,400); context.stroke() textAlign = left/center/right left：基線在文本左側(cè) center：基線在文本中間 right：基線在文本右側(cè) -
垂直對其
//繪制文本的基線 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.接受一個數(shù)字，確定對象陰影的水平投射距離
context.shadowOffsetX = 5;
3.接受一個數(shù)字，確定對象陰影的垂直投射距離
context.shadowOffsetY = 4;
4.為陰影生成模糊效果
context.shadowBlur = 12;
繪制矩形和圓形
1.創(chuàng)建路徑和繪制同時執(zhí)行
context.fillRect(0,0,100,100);
2.使用路徑創(chuàng)建圖形
-
每次繪制新圖形之前，都要先重新創(chuàng)建一個路徑
beginPath() -
結(jié)束創(chuàng)建路徑，主要用于讓線條閉合
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 - 結(jié)束位置 0 - 2*Math.PI //direction - 方向：默認值為false，表示順時針 context.closePath(); context.stroke();
-
