H5 canvas基础入门到捕鱼达人小游戏实现(1)

为什么学习canvas？

看见别人网页一些非常炫酷的效果，羡慕不已，于是对canvas产生了浓厚的兴趣，所以想仔细学习学习canvas.下面就一起来学习吧，本文为系列文章，最后会编写一个简单版的捕鱼达人小游戏作为结课标准。

小图片走起~

什么是canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建丰富> 的图形引用

好吧既然知道什么是canvas就好办了，我们来创建canvas画布吧

HTML代码

<canvas id="canvas" width="800" height="600" style="border:1px solid #ddd;display: block;margin:0 auto;"></canvas>

这样我们就创建出一块带边框的白色画布了。当然也可以像普通元素一样定义它的样式。

获取画布对象

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.moveTo(100,100);
context.lineTo(400,400);
context.stroke();

看看画出什么来了？

canvas api

context.moveTo(x,y)：设置落笔点(x,y画布位置)
context.lineTo(x,y)：画到哪里
context.stroke()：描边(未添加样式直接描边就为黑色)

一条黑色的线段还是太单调了，如果希望画一个三角形呢？并且希望边为粉色的呢？

var canvas = document.getEleme