一、创建Canvas&绘制图像
<canvas id="mycanvas"></canvas>
//html中创建一个canvas
var canvas=document.getElementVyId("mycanvas");
var ctx=canvas.getContext("2D");
//获取canvas对象，获取2d的绘制环境
1）绘制一条直线：lineTo（x,y）
moveTo(x,y) //起始位置 ，移动的起始位置；
lineTo(x,y) //终止位置
lineWidth //线条的宽度
strokeStyle //线条样式，一般用于改变颜色
（以上四种操作是基于状态的绘制图形，必须使用stroke来进行实际的绘制）
stroke() //绘制线条
2）绘制一新的图形（开始全新的路径）：beginPath（）
对于不同的路径使用不同的样式，修改的属性值会被修改，不变的数据会被沿用；
3）绘制封闭的图形：closePath（）（与beginPath成对出现）
4）颜色填充：fillStyle 填充的颜色的状态，fill() 进行颜色的实际填充；
5）rect（x,y,width,height）；在x,y位置绘制指定大小的矩形；
save和restore可以保存和恢复canvas的图形绘制环境；（保存上下文和恢复上下文）
绘制五角星函数推导如下图所示：（绘制图像只需要将10个顶点进行连接就行）
通过transform进行简单的图形变换，transform有六个参数（每个参数的作用如下图所示）
transform具有级联的作用最后一个应用的图形将应用之前所有transform的图形变化样式，settransform可以解决此种问题；
//星星的绘制路径图
function PathStar(ctx){
ctx.beginPath();//封闭路径
//初始位置就为第一个lineto的位置
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+72*i)*Math.PI/180),
-Math.sin((18+72*i)*Math.PI/180));
ctx.lineTo(Math.cos((54+72*i)*Math.PI/180)/2,
-Math.sin((54+72*i)*Math.PI/180)/2);
}
//标准的五角星路径，外圆半径为1，内圆半径为1/2;
ctx.closePath();//结束绘制路径
}
二、Canvas的常用API
1） fillStyle用于设置图形样式：（之后将newstyle赋值给fillStyle即可，strokeStyle用法与之类似）
var newstyle=ctx.createLinearGradient(x0, y0, x1, y1);//起始和结束位置点
newstyle.addColorStop(offset, color);//样式颜色，offset为起始和结束位置，范围【0,1】
2）ctx.arc(x, y, r, startAngle, endAngle, anticlockwise)；
x,y是指的圆心座标，r为圆的半径，startAngle和endAngle指的是起始和结束弧度，最后一个参数是代表旋转方向；
3）贝塞尔曲线（二次）：ctx.quadraticCurveTo(cpx, cpy, x, y)；
二次贝塞尔曲线绘制（通过此网站可以快速生成曲线代码以及形状）
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
4）贝塞尔曲线（三次）：ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)；
三次贝塞尔曲线的绘制样式测试：（通过此网站可以快速生成曲线代码以及形状）
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
（注：三次贝塞尔曲线可以实现出花瓣的样式）
5）清除矩形（画布）：一般用在canvas的动画制作中，clearRect（）
ctx.clearRect(x, y, w, h)；
x,y矩形的起始位置，w和h指矩形的宽度
三、Finally 实战
最后用canvas做一个贪吃蛇的小游戏来检验自己的学习成果：（运行截图如下）
游戏代码 （html贪吃蛇代码，如果有什么问题还请大家谅解）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "></script>
</head>
<body>
<div style="width:80%;margin:auto;background-color:#FFDEAD;">
<canvas id ="mycanvas" style="margin:auto; width:100%;" >
/*canvas画布*/
</canvas>
</div>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");//获取canvas对象
var ctx=canvas.getContext("2d");//获取绘制环境
canvas.width=800;
canvas.height=380;
var down=0;
var snack=[[20,20],[20,40],[20,60]];
var foodx=80;
var foody=80;
var foodnum=1;
var dirction=2;//0 1 2 3 默认向右
checked=function(){
if(snack[0][0]==foodx&&snack[0][1]==foody){
snack.unshift([foodx,foody]);
return 1;//获取食物
}
else if(Find()==1){
return 0;
}
}
var timer=setInterval("Game()", 200) ;
window.addEventListener('keydown', keydown,true);//键盘响应
function Game(){
ctx.fillStyle="red";
ctx.clearRect(0, 0, 800, 380);//清除画布
if(checked()==1){//游戏判断
showfood();
}
else if(checked()==0){
clearInterval(timer);
foody="";
foodx="";
}
selfMove();//蛇自己移动
ctx.fillRect(foodx,foody,20,20);//绘制食物
showsnack();//绘制蛇
down=0;
}
function selfMove(){
if(dirction==0){
if(snack[0][0]-20>=0)
snack.unshift([snack[0][0]-20,snack[0][1]]);
else{
snack.unshift([780,snack[0][1]]);
}
}
else if(dirction==1){
if(snack[0][1]-20>=0)
snack.unshift([snack[0][0],snack[0][1]-20]);
else{
snack.unshift([snack[0][0],360]);
}
}
else if(dirction==2){
if(snack[0][0]+20<=800)
snack.unshift([snack[0][0]+20,snack[0][1]]);
else{
snack.unshift([0,snack[0][1]]);
}
}
else if(dirction==3){
if(snack[0][1]+20<=360)
snack.unshift([snack[0][0],snack[0][1]+20]);
else{
snack.unshift([snack[0][0],0]);
}
}
snack.pop();
}
function keydown(e){
//left 37 up 38 right 39 down 40;
if(e.keyCode==37&&dirction!=2){
dirction=0;
}
if(e.keyCode==38&&dirction!=3){
dirction=1;
}
if(e.keyCode==39&&dirction!=0){
dirction=2;
}
if(e.keyCode==40&&dirction!=1){
dirction=3;
}//按键响应
}
function showsnack(){
for(var i=0;i<snack.length;i++){
ctx.fillStyle="green";
ctx.fillRect(snack[i][0], snack[i][1], 20, 20);
}
}
function showfood(){
var x,y;
x=Math.floor(Math.random()*29+1)*20;
y=Math.floor(Math.random()*15+1)*20;
foodx=x;
foody=y;
}
function Find(){
for(var i=1;i<snack.length;i++){
if(snack[i][0]==snack[0][0]&&snack[i][1]==snack[0][1]){
return 1;//游戏结束
}
}
return 0;//游戏继续
}
</script>
</body>
</html>