2021-10-06 canvas知识点补充

原创已于 2022-03-09 18:27:32 修改 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #canvas

于 2021-10-06 23:12:23 首次发布

知识点同时被 2 个专栏收录

96 篇文章

订阅专栏

笔记

87 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas元素的使用，包括如何设置宽高、绘制矩形、路径、直线段、圆弧，以及填充和描边样式。通过示例展示了绘制三角形、笑脸和方格阵列等图形的方法，还涵盖了动态改变颜色的技巧，是学习Canvas图形绘制的实用教程。

1.canvas的使用和属性

<canvas style="border:1px red solid" 
width="200" height="150" id="mnycanvas"></canvas>

2.绘制图形

    <canvas id="mycanvas"></canvas>

2.1.绘制矩形:canvas能原生绘制的唯一图形

    var c = document.getElementById("mycanvas");
    //允许获取进行绘制的2d对象
    var cont = c.getContext("2d");
    //绘制一个填充矩形
    cont.fillRect(50, 25, 300, 250); //x y width height
    //绘制一个清除矩形
    cont.clearRect(75, 50, 200, 100);
    //绘制一个描边矩形
    cont.strokeRect(100, 75, 100, 50);

结果:
在这里插入图片描述

2.2.绘制路径:canvas要绘制其他图形必须借助路径

使用路径绘制图形的步骤:
1.创建路径起始点;
2.绘制路径;
3.把路径封闭;
4.渲染图形:描边,填充等

例子1:绘制一个三角形

    cont.beginPath(); //设置路径起始点
    cont.moveTo(50, 50); //把笔触移动到moveTo(x,y)
    cont.lineTo(100, 50); //绘制直线段:lineTo(x,y)
    cont.lineTo(100, 100);
    cont.closePath(); //封闭路径
    // cont.fill();//填充
    cont.stroke(); //描边

结果:
在这里插入图片描述
例子2:moveTo绘制不连续路径(笑脸)

//绘制圆形:arc(x,y,r,startAngle,endAngle);(圆弧)
    var cont2 = document.getElementById("mycanvas2").getContext("2d");
    cont2.beginPath();
    //绘制脸型
    cont2.arc(75, 75, 50, 0, Math.PI * 2, true);
    //绘制左眼
    cont2.moveTo(60, 65);
    cont2.arc(60, 65, 5, 0, Math.PI * 2, true);
    //绘制右眼
    cont2.moveTo(90, 65);
    cont2.arc(90, 65, 5, 0, Math.PI * 2, true);
    //绘制笑弧
    cont2.moveTo(110, 75);
    cont2.arc(75, 75, 35, 0, Math.PI, false);
    cont2.stroke();

结果:
在这里插入图片描述

3.直线段:lineTo(x,y)

 //从当前位置(即moveTo)的(x,y)移动到指定位置(即lineTo)的(x,y)

4.圆弧:arc(x,y,r,sAngle,eAngle,bool);

    //(x1,y1)弧起点坐标,(x2,y2)弧终点坐标,r弧半径
    var cont3 = document.getElementById("mycanvas3").getContext("2d");
    cont3.beginPath();
    cont3.moveTo(0, 50);
    cont3.lineTo(50, 50); //x:0-->50(直)
    cont3.arcTo(100, 50, 100, 100, 50); //y:50-->100(弧)
    cont3.lineTo(100, 200); //y:100-->200(直)
    cont3.stroke();

结果:
在这里插入图片描述

5.样式和颜色

设置填充色:fillStyle,
设置描边色:strokeStyle("颜色名")

填充色例子1:for循环绘制方格阵列,每格不同填充色

<canvas id="mycan"></canvas>

    for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
            c.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)';
            c.fillRect(j * 25, i * 25, 25, 25); //x y width height
        }
    }

结果:
在这里插入图片描述

描边色例子2:for循环绘制圆形阵列,每格不同描边色

<canvas id="mycan"></canvas>

    for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
            c.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')';
            c.beginPath();
            c.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
            c.stroke();
        }
    }