10h搞定canvas基础系列（canvas零基础入门教程）_H5之家

【上篇】 —建议学习时间4小时课程共（上中下）三篇

此笔记是我初次接触canvas的时候的学习笔记，这次特意整理为博客供大家入门学习，几乎涵盖了canvas所有的基础知识，并且有众多练习案例，建议大家学习10~15个小时，里面的案例请挨个敲一遍，这样才能转化为自己的知识。

技术要求：有html/css/js基础。

canvas标签

<canvas>是一个图形容器，让我们在网页中绘制图形，很多人把它称为画布，使用canvas绘制图形就相当于在画布上画画一样，我们可以绘制非常炫酷的页面效果。

如下图这种：

上面的效果当然要后期才有能力编写了，现在我们先从简单的入手

直接看代码

* canvas

我们定义了一个canvas标签（用法和普通标签一样），然后在style中设置了一点样式。

注意：canvas的真实宽高一定要在canvas属性中设置，不能在css中设置，因为canvas默认的宽高是 300*150，如果在css中设置样式，相当于是把画布进行拉伸缩放

呈现效果是这样的：

对于不支持画布的浏览器，我们可以在中间设置替代显示内容

你的浏览器不支持画布

在画布中

绘制方块

代码写到html末尾的<script>标签中

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "red"; //设置颜色 ctx.fillRect(50,50, 200, 200); //绘制方块

代码解释：首先要获取canvas的dom，并获取它的2d上下文，然后才能绘制，绘制使用fillRect(x, y, width, height)绘制方块填充，使用fillStyle设置填充的颜色

注：我们所有对画布的操作，都需要先去获取绘图上下文才能操作，也就是 getContext(“2d”)

然后

绘制方块描边

，使用strokeRect(x, y, width, height)，使用strokeStyle设置描边颜色

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.strokeStyle = "red"; ctx.strokeRect(50,50, 200, 200); //绘制边框

如果要清除（擦除）某个区域，使用clearRect(x, y, width, height)，

如下，我们绘制了方块，并且清除了绘制的区域，这样就什么都看不到了。

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "red"; //设置颜色 ctx.fillRect(50,50, 200, 200); //绘制方块 ctx.clearRect(50,50, 200, 200); //清除范围

注意：这里清除的是方块，如果要清除方块描边的话，需要把范围扩大（因为描边默认是外描边） ctx.clearRect(48,48, 204, 204); //清除范围

绘制路径

使用beginPath()表示开始绘画，使用moveTo（x,y）标记绘制起点，使用 lineTo()进行绘制，使用closePath()闭合路径，绘制完成路径之后在使用 stroke()来绘制轮廓

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //绘制路径 ctx.beginPath(); ctx.moveTo(100, 100); //通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。 ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.moveTo(300, 100); ctx.lineTo(300, 200); ctx.lineTo(400, 200); ctx.closePath();// 闭合路径，会自动闭合路径开始和结束的两个点 ctx.stroke(); //绘制轮廓

显示结果如下：

如果要绘制填充，使用 fill()

绘制填充会自动闭合路径，可以不用使用 closePath()

绘制圆形

使用arc(),具体参数如下