【Canvas】入门 - 实现图形以及图片绘制

Canvas

概念：

Html5提供的一个新标签，也叫画板或者画布。

功能

1. 开发小游戏：微信小游戏开发
2. 可视化数据（数据图表化）
   • 数据可视化库：百度ECharts、d3.js 、three.js、highcharts
3. 地图：例如百度地图、高德地图等

使用步骤

canvas标签介绍

1. 标签用于渲染一个画图，用于展示绘图内容：（默认大小是300*150）

<canvas></canvas>

1. 通过width和height属性来调整宽高

<canvas width="300" height="300"></canvas>

• 不能通过样式来调整宽高。原因是：使用css样式，不会增加像素点，只会将原有像素点扩大。
• 通俗来讲，就是使用属性画布上的图形该是多大还是多大，而使用样式就会把画布上的图形扩大。

绘图步骤

1. 拿到canvas画布
2. 通过canvas拿到绘图上下文（一系列的API集合）
3. 使用API绘制需要的图形

// 1. 获取canvas标签
        let canvas = document.querySelector('canvas')
        // 2. 绘制上下文对象 （getContext方法）
        //     参数说明： - 2d:获取2d上下文对象   - webgl：获取3d上下文对象
        const ctx = canvas.getContext('2d')
        // 3. 使用上下文对象的api进行绘图

        // - 把鼠标移动到（100，100）位置
        ctx.moveTo(100,100)
        // - 连线
        ctx.lineTo(200,200)
        // - 描边绘制
        ctx.stroke()

Canvas常见api

1. moveTo() ：设置绘制起点
   • ctx.moveTo(x,y);
   • 设置上下文绘制路径的起点，相当于移动画笔至某个位置
   • x,y都是相对于canvas盒子的坐标
   • 绘制必须先设置起点，否则不生效
2. lineTo() ：绘制直线
   • ctx.lineTo(x,y);
   • 从x,y位置绘制一条直线到起点或者上一个线头点
   • (x,y) 线头点坐标
3. stroke()： 描边
   • ctx.stroke();
   • 根据路径绘制直线（路径只是草稿，真正将直线绘制出来必须执行stroke() ）
4. fill()：填充
   • ctx.fill();
   • 填充，是将闭合路径的内容填充成具体的颜色，默认为黑色
   • 如果所有的描点都没有构成封闭结构，也会自动构成一个封闭图形
5. lineWidth ：设置线宽
   • ctx.lineWidth
   • 设置或返回当前的线条宽度，沿着起始坐标往上下两边扩展
6. fillStyle ：设置或返回用于填充绘画的颜色
7. strokeStyle：设置或返回用于描边的颜色
8. closePath 闭合路径
   • 他会试图从当前的终点连一条路径至起点，让整个路径闭合
9. beginPath 开始路径
   • 建议画图之前先调用beginPath()
   • canvas中的绘制方法（比如：stroke，fill……）都会以上一次beginPath之后的所有路径为基础进行绘制，不管用moveTo()把画笔移动到哪里，只要不beginPath ，那就是一直在画一条路径。
   • 也就是说，如果不beginPath()，那么画另一个图也会重新画一遍上一个图。

let canvas = document.querySelector('canvas')
        const ctx = canvas.getContext('2d')
        ctx.beginPath()
        // 设置绘制起点
        ctx.moveTo(100,100)
        // 绘制直线
        ctx.lineTo(200,100)
        ctx.lineTo(200,200)
        ctx.lineTo(100,200)
        // 闭合路径
        ctx.closePath()
        // 描边
        ctx.strokeStyle = 'blue'
        ctx.lineWidth = 20
        ctx.stroke()
        // 填充
        ctx.fillStyle = '#fff'
        ctx.fill()

绘制矩形的api

1. 快速绘制矩形的方法 rect()
   • 语法 ctx.rect(x,y,width,height)
   • x,y是矩形左上角坐标，width和height都是以像素计
   • rect方法只是规划了矩形的路径，并没有填充和描边
2. 快速创建描边矩形和填充图形
   • ctx.strokeRect(x,y,width,height)
     • 此方法直接进行stroke绘制，不会产生路径
   • ctx.fillRect(x,y,width,height)
     • 此方法直接进行fill填充绘制，不会产生路径
   1. 清除矩形
      • clearRect(x,y,width,height)

let canvas = document.querySelector('canvas')
        const ctx = canvas.getContext('2d')

        ctx.strokeRect(100,100,200,200) // 在（100，100）的地方绘制一个宽高都是200的矩形

        ctx.fillStyle = '#a19'
        ctx.fillRect(300,300,200,100) //在（300，300）的地方填充一个宽200高100的矩形

        ctx.clearRect(300,300,50,50) // 在（300，300） 的地方擦除宽高都为50的矩形

绘制图片

基本使用

1. ctx.drawImage(img,x,y)
   • 绘制的图片
   • x,y表示绘制在画布的什么位置
2. ctx.drawImage(img,x,y,sWidth,sHeight)
   • sWidth,sHeight表示绘制图片的大小
3. ctx.drawImage(img,x,y,sWidth,sHeight,x,y,width,height)
   • 参数2，3，4，5表示从图片的那个位置截取多大的图片
   • 参数6，7，8，9表示会知道画布的那个地方，以及绘制的大小