Canvas绘制

在项目中，其实很多时候我们可以用到canvas

比如：一张背景图你还想放其他图片在动的，还有就是一个页面是一张背景长图，但是图片比较大，加载出来比较慢的，也可以用canvas，然而我在遇到一张背景长图的时，用了canvas去绘制背景长图，加载比较快：

那么canvas是什么呢？

① canvas是一个矩形区域的画布，可以用JavaScript在上面绘画，控制每一个像素。

② canvas标签使用JavaScript在网页上绘制图像，本身不具备绘图功能。

③ canvas拥有多种绘制途径，矩形，图形，字符以及添加图像的方法。

④ HTML5之前的web页面只能用一些固定样式的标签：比如：p，div，h1等，但有了canvas Web页面可以丰富多彩。

canvas的绘制：

canvas绘图上下文context：

下文：是所有的绘制操作api的入口或者集合。 canvas自身无法绘制任何内容。canvas的绘图是使用JavaScript操作的。 Context对象就是JavaScript操作Canvas的接口。使用[CanvasElement].getContext('2d')来获取2D绘图上下文。

var context = canvas.getContext('2d');

下面我就举个例子,绘制半三角形：

坐标系：

    var canvas = document.getElementById('cv');
    // 获取canvas的上下文对象
    var context = canvas.getContext('2d');
    context.moveTo(100,100);
    context.lineTo(200,200);
    context.lineTo(100,200);
    context.stroke()

设置绘制起点(moveTo)

① 语法：ctx.moveTo(x,y)。

② 解释：设置上下文绘制路径的起点，相当于移动画笔到某个位置。

③ 参数：x，y都是相对于canvas盒子的最左上角。

④ 注意：绘制线段前必须先设置起点，不然绘制无效。

绘制直线(lineTo)

① 语法：ctx.lineTo(x,y)。

② 解释：从x，y的位置绘制一条直线到起点或者上一个线头点。

③ 参数：x，y线头点坐标。

描边(stroke)

① 语法：ctx.stroke()。

② 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke。

③ stroke (用笔等)画，轻抚，轻挪，敲击，划尾桨，划掉，(打字时)击打键盘。

一张背景长图的绘画步骤：

1.在template中：

    <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>

2.在data里初始化canvas的高度和宽度值为0：

    canvasHeight: 0,
    canvasWidth: 0,

3.在motheds里面画出来即可：

        this.canvasWidth = document.documentElement.clientWidth
        // 画出的是canvas的大小
        let canvasHeight = parseFloat(document.documentElement.style.fontSize) * 30 
        this.canvasHeight = parseInt(canvasHeight)
        // 开始绘画
        var c = document.getElementById('canvas')
        var ctx = c.getContext('2d')
        var img = new Image()
        img.src = '这里是图片的地址'
        var _this = this
        img.onload = function () {
          console.log('canvas图')
          ctx.drawImage(img, 0, 0, _this.canvasWidth, _this.canvasHeight)
        }
      },

注意：图片的地址一定要写对，高度是随项目的大小设置即可。