知识点（了解）
路径比较复杂，如何填充
内容
文字方法
- 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>
