canvas简单学习--入门级别

一直对canvas充满敬畏感，今天终于有空来看看，简单了解了下，算是入门吧

参照文档，做了几个示范，大概有了一定了认识，总的来说 canvas的制作会有几个步骤如下：（个人理解，不喜可喷）

1.通过canvas标签，创建 画布实例

// canvas标签 创建一块画布，可通过 宽高属性设置 大小，本身是没有绘图能力，需要通过 代码实现
<canvas class="canvas-r" id="my-canvas" width="300px" height="300px" style="border: 1px solid #f40;" ></canvas>
------
 var c = document.getElementById('my-canvas')
 获得 2d 上下文对象
 var ctx = c.getContext('2d')

2. 创建好实例后，就可以定义 绘制的路径、线条颜色、圆弧、文本、渐变、图像、视频等，大概思路 可以结合画画，比如 定义好线条颜色? 矩形? 还是圆? 空心？实心？起始位置？结束位置？。。。还可以对绘制好的图案进行 缩放，旋转等操作。

3.看一些简单的例子

1、画一个正方形–画布宽 300px 高300px 加了一个红色边框，便于查看

 // 填充颜色
  ctx.fillStyle='#FF0000'
   // 绘制矩形 坐标 x y 宽 高 -----坐标为画布的  左上角      坐标轴 右--->x  下-----y
   ctx.fillRect(0,0,150,150)

2、路径–画线

 // 起始位置
 ctx.moveTo(0,0)
// 结束位置
 ctx.lineTo(300,300)
 // 线条颜色
 ctx.strokeStyle='yellow'
 // 绘制已定义的路径
 ctx.stroke()

3、弧形、圆

//开始一条路径，或重置
ctx.beginPath()
// 线条颜色
ctx.strokeStyle='#f40'
// 绘制圆 x y 半径 起始角度 结束角度 ---不懂没关系，看文档，Math.PI--圆周率 前面那个数字  2 整圆（360deg）
ctx.arc(150,150,40,1*Math.PI,1.5*Math.PI)
// 绘制 定义的路径
ctx.stroke()
// 开始另外一条
ctx.beginPath()
ctx.arc(150,150,40,0,0.5*Math.PI)
ctx.stroke()

圆，起始角度，结束角度 参考图

4、 渐变 --线性渐变 --径向渐变

随意搞的，坐标位置都是瞎写的，图案比较丑

 // 创建线性渐变对象 x,y,x1,y1
let grd=ctx.createLinearGradient(0,0,150,0)
// 径向渐变
let grdR=ctx.createRadialGradient(75,75,5,90,90,100)
// 设置渐变颜色 必须两种以上 渐变 0---1
grdR.addColorStop(0,'red')
grdR.addColorStop(1,'white')
// 填充渐变
ctx.fillStyle=grdR
// 渐变图像--绘制矩形
ctx.fillRect(10,10,150,150)

大概就到这里了，图像（可裁剪等），视频（类似帧动画），文本（字体空心，实心）就不一一展示了

canvas大概就是这种套路，实际需要的肯定远不止示例这么简单，这里只是简单认识下，总的来说，canvas就是像画画，可以设置画笔的颜色，角度，位置，填充色，甚至平移，缩放，旋转等等，有兴可以多研究。