canvas学习，文末有用canvas写的飞机大战

canvas是真的好玩，建议前端小伙伴都去学一学。

这周把canvas学了下，并且用canvas写了一个飞机大战小游戏，文章后续有运行截图，代码获取请前往微信公众号【刘公子开发日记】，回复飞机大战。写canvas可比平时写的各种div页面好玩多了，简直是打开了新世界的大门。正好今天有时间，把这周学到的东西和遇到的坑总结一下。

canvas基本介绍

canvas只是一个html标签，特殊的地方在于利用JavaScript可以在canvas标签区域内进行绘画。canvas内部有坐标系，坐标系如下图：

canvas拥有多种绘制路径、矩形、圆形、文字、图片的api。

canvas本身无法绘制任何内容，canvas的绘图是通过JavaScript操作的。

js对canvas的一切操作都是通过下面代码中的ctx对象，ctx对象是通过canvas获取的2d绘图上下文对象。

<canvas id="myCanvas" height="600" width="400">
    您的浏览器不支持canvas！！！请升级至IE9以上。
</canvas>
复制代码

let canvas = document.getElementById(id)
let ctx = canvas.getContext("2d")
复制代码

常用的api汇总（方法参数可自行百度）

绘制路径的api（注意：路径是看不到的，需要填充或者描边之后才能看到）

moveTo(x,y) : 设置一条路径的起点

lineTo(x,y) : 绘制一条到x，y点的路径

closePath(): 创建一个从当前点到起始点的路径，从而形成一个闭合路径

fill(): 对路径进行填充

fillStyle(): 设置填充模式（颜色、渐变、模式）

stroke(): 对路径进行描边

strokeStyle(): 设置描边模式

beginPath():起始一条新路径，此路径所有的样式都会恢复为默认值

arc(): 用于绘制圆弧

绘制矩形的api

绘制图片的api

drawImage()

整体操作canvas

遇到的坑

不多哔哔直接上代码展示一下。

以下代码最终显示的是两条蓝色的线，因为这是在同一条路径下进行绘制，会以最后一次设置的样式为准。

ctx.moveTo(100,100)
ctx.lineTo(200,200)
ctx.strokeStyle = 'red'
ctx.stroke()
//ctx.beginPath() 加上这句话就是画一红一蓝两条线 开启新路径
ctx.moveTo(200,200)
ctx.lineTo(100,200)
ctx.strokeStyle = 'blue'
ctx.stroke()
复制代码

下面的代码会画出两条线，这是因为canvas是基于状态的，第二次translate会在第一次的基础上进行位移。加上注释的两句话就会绘制重合的两条线。

save和restore 类似于进栈出栈，restore会将画布的状态回退到上一次save时画的状态，save和restore一般成对出现。

//ctx.save()
ctx.translate(10,10)
ctx.moveTo(100,100)
ctx.lineTo(200,200)
ctx.strokeStyle = 'red'
ctx.stroke()
//ctx.restore()
ctx.translate(10,10)
ctx.moveTo(100,100)
ctx.lineTo(200,200)
ctx.strokeStyle = 'red'
ctx.stroke()
复制代码

案例展示

空格发射子弹，方向键移动飞机。获取源码请前往微信公众号【刘公子开发日记】，回复 飞机大战。