一般使用Canvans 的常规操作

canvas标签类似img，可以设置 width 属性和 height 属性，如果没有设置，canvas 画布的默认宽高是 300 * 150。下面来介绍一些 canvas 的常规操作吧.

1. 使用 canvas 画一个矩形

代码如下

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    ctx.fillStyle = "red"; /* 填充颜色 */
    ctx.fillRect(0,0, 100, 50);/* 4个参数分别是 x y 水平方向和垂直方向,是从左顶点(0, 0)开始的, w h 是绘制的矩形的宽和高了 */
</script>

 

 

效果如图所示

 

 

2. 使用 canvas 画一条线

代码如下

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    ctx.moveTo(0, 0); /* 是线开始的坐标 参数是 x y 水平方向和垂直方向*/
    ctx.lineTo(100, 100); /* 是线条结束坐标 参数如上 */
    ctx.stroke(); /* 开始描绘线 */
</script>

效果如图所示

 

那么想要的不是一条直线呢,我们可以在描绘线前继续写 ctx.lineTo(); 就行啦,参数一样的,然后在进行描绘

 

3. 使用 canvas 画一个圆

代码如下

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    ctx.beginPath(); /* 定义绘制的是一个圆 */
    /* 
        分别有六个参数 前两个依然是 x 和 y 的是不同的是不是从绘制的图形的左顶点坐位开始的位置了,而是以圆心作为坐标
        第三个是 r 是绘制圆的半径
        第四个是起始角 从 0 度开始绘制,
        第五个是结束角，2 * Math.PI 是360度的弧度角,半圆的话是(ctx.arc(60, 60, 30, 0, 1 * Math.PI, true))
        第六个是逆时针还是顺时针 False 为顺时针，true 为逆时针。
    */
    ctx.arc(30, 30, 30, 0, 2 * Math.PI, false);
    ctx.stroke();
</script>

 

 

 

如果需要填充颜色的话需要将 ctx.stroke() 改为

ctx.fillStyle = "red";
ctx.closePath();
ctx.fill();

效果如图

 

 

 

4. canvas 绘制文本

代码如下

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    ctx.font = "40px 楷体"; /* 40px 是文字的大小 后面的是文字的字体(其他参数建议查询) */
    ctx.fillText('我是一段文字', 10, 60);/* 第一个是文本的内容,后两个是 x y,最后一个是限制的文本的长度(以像素计)  */
</script>

 

 

也可以使用 ctx.strokeText('我是一段文字', 10, 60);绘制不填充的文本如图所示

 

ctx.strokeStyle = "red";
ctx.strokeText('我是一段文字', 10, 60);

如图所示

 

 

 

5. canvas渐变

代码如下

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    /* 
        创建渐变  x0	渐变开始点的 x 坐标
        y0	渐变开始点的 y 坐标
        x1	渐变结束点的 x 坐标
        y1	渐变结束点的 y 坐标 
    */
    let grd = ctx.createLinearGradient(0,0,200,0);
    
    /*
       第一个值是 介于0.0 和 1.0 之间值, 表示渐变的开始位置和结束位置
       第二个是颜色
    */
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'green');
    /*填充颜色*/
    ctx.fillStyle = grd;
    /* 参数分别是 x y w h 水平方向 垂直方向 宽度 和 高度*/
    ctx.fillRect(20, 20, 150, 100);
</script>

 

 

径向渐变 和 线性渐变的区别在在于创建时的参数不同 一个是 createLinearGradient() 一个是 createRadialGradient() 下面的是径向渐变

 

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
/*
        x0	渐变的开始圆的 x 坐标
        y0	渐变的开始圆的 y 坐标
        r0	开始圆的半径
        x1	渐变的结束圆的 x 坐标
        y1	渐变的结束圆的 y 坐标
        r1	结束圆的半径
    */
    let grd = ctx.createRadialGradient(0, 0, 5, 0, 60, 100);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    ctx.fillRect(20, 20, 100, 80);
</script>

 

 

可以调试下参数,看看有哪些变化

 

6. canvas 填充图片

<img src="../avatar.jpg" width="300" height="260" alt="avatar">
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    var img = document.getElementsByTagName("img")[0];
    img.onload = function() {
        /* 
            第一个规定要使用的图像、画布或视频
            第二个第三个是 x 和 y 轴的坐标
            第四个和第五个是绘制图片的大小
        */
        ctx.drawImage(img, 10, 10, 150, 100);
    } 
</script>

下面是使用的img 和 canvas 绘制绘制图片的效果 主要是 drawImage() 这个参数(建议查询)

 

 

以上就是 canvas 的常规操作的介绍了,有兴趣的朋友可以自己去查阅学习呦.