canvas基础讲解加示例

之前有收到小伙伴们的留言说，以前有的实战站项目写的还可以，你能不能从基础教教让他零基础也能上手。也不是什么难题。我就准备了今天的canvas简单 用法介绍。因为你若想实现一些不错的效果基础阶段还是要用到canvas的。

技术栈

之前其实有介绍过，只是没有给示例我们再来说说他。

canvas元素是HTML5中新出现的，我们可以将其当做一个像素级的画布，它

允许我们绘制直线、圆、矩形等基本形状，以及图像和文字。使用canvas元素， 可以实时渲染图形、游戏动画或其他虚拟图像，而且它已经为快速绘图做过优化了。各大主流浏览器都已经支持GPU加速的2Dcanvas渲染，因此，使用canvas绘制出的游戏动画运行速度会很快。

它内部封装的函数：

rect( x, y, width, height ) 绘制矩形

fillRect( x, y, width, height )绘制被填充的矩形

strokeRect( x, y, width, height )绘制矩形（无填充）

clearRect( x, y, width, height ) 清除指定的矩形内的像素



fill()填充当前绘图（路径）

stroke() 绘制已定义的路径

beginPath()起始（重置）当前路径

moveTo( x, y )将笔触移动到指定的坐标(x,y)

lineTo( x, y )绘制一条从当前位置到指定的坐标(x,y)的直线

clip()从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo()创建二次贝塞尔曲线

bezierCurveTo() 创建三次贝塞尔曲线

arc( x, y, radius, startAngle, endAngle, anticlockwise)绘制圆或圆弧

arcTo( x1,