知識點（了解）
路徑比較復雜，如何填充
內容
文字方法
- strokeText(text, x, y) 描邊寫字
- fillText(text, x, y) 填充寫字
- measureText(text) 返回對象 包換文本的寬度
- font 屬性 設置 大小、字體 如
cxt.fon="100px MicrosoftYaHei"; - textAlign 屬性 水平對齊方式 start(默認)/end/center/left/right
- textBaseline 屬性 垂直對齊方式 alphabetic(默認)/top/bottom/middke/hanging/ideographic
繪制圖片（插入圖片）
插入圖片
drawImage(img, x, y)
- img image的dom元素
- x,y 插入到 畫布的位置 坐標
插入圖片并改變大小
drawImage(img, x, y, width, height)
插入裁剪后的圖片
drawImage(img, sx,sy,swidth,sheight, x, y, width, height)
- sx/sy: 圖片上開始裁剪的位置
- swidth/sheight : 裁剪圖片的大小
陰影
- shadowColor 陰影顏色
- shadowBlur 陰影的模糊值
- shadowOffsetX 陰影的左偏移量
- shadowOffsetY 陰影的右偏移量
漸變
線性漸變
var grd = cxt.createLinearGradien(x, y, x1, y1);
grd.addColorStop(位置, color)
動畫實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="mycanvas">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
canvas.width = 500;
canvas.height = 500;
canvas.style.border = "1px solid #ccc";
// 開啟
var cxt = canvas.getContext("2d");
//獲取圖片
var img =document.createElement("img");
img.src = "./1.png";
//圖片顯示位置聲明（用于移動）
var xx =150;
var yy =150;
var dirIndex = 0;
img.onload= function(){
var frameIndex = 0;
//裁剪和清空圖片使畫布出現圖片替換
setInterval(function(){
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.drawImage(img,frameIndex*50,dirIndex*65,50,65,xx,yy,50,65);
frameIndex ++;
//循環裁剪圖片
if(frameIndex > 3){
frameIndex = 0;
}
},100);
}
document.onkeydown=function(e){
switch(e.keyCode){
//增加X或者Y軸移動的距離
case 37: dirIndex=1,
xx-=5;
break;
case 38: dirIndex=3,
yy-=5;
break;
case 39: dirIndex=2,
xx+=5;
break;
case 40: dirIndex=0,
yy+=5;
break;
}
}
</script>
</body>
</html>
