使用canvas画三角形，圆形，半圆，八卦

最新推荐文章于 2024-04-20 16:29:18 发布

这是一个对象

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量1.9k

点赞数

文章标签： servlet 前端 javascript

本文链接：https://blog.csdn.net/m0_67576744/article/details/126798380

版权

1，三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>
    // 获取元素
    var my = document.getElementById('my')
    // 建立画布
    var c = my.getContext('2d')

    // 开始路径
    c.beginPath()
    // 定点 先将你的笔移到0,0处
    c.moveTo(100, 100)
    //先将笔画到200,200处
    c.lineTo(200, 200);
    // 画线 将笔画到150,220处
    c.lineTo(150, 230)
    // 画线 将笔画到100,100处形成闭合的三角形
    // fill函数会自动闭合图形c.lineTo(100,100); 可以不写
    c.lineTo(100, 100)
    // 执行绘画.轮廓三角形
    // c.stroke()
    c.fillStyle = 'red';//改变填充颜色
    //填充三角形(实心)
    c.fill();
    // 关闭路径
    c.closePath()
</script>

</html>

2，圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>
    // 获取元素
    var my = document.getElementById('my')
    // 建立画布
    var c = my.getContext('2d')

    // 开始路径
    c.beginPath()
    // 画圆 参数：参数1：原点x，参数2：原点y，参数3：半径，参数4：起始弧度，参数5：结束弧度，参数6：(非必填)：false顺时针，true顺时针   | 角度0代表三点钟方向。math.pi可简单认为是180°
    c.arc(150,150,100,0,Math.PI*2,false)

    //c.stroke轮廓和c.fill填充只能二选一
    // 更改轮廓颜色 红色
    c.strokeStyle='red'
    // 执行绘画 轮廓圆形
    c.stroke()
    // 更改填充颜色 红色
    // c.fillStyle='red'
    // 执行绘画 填充圆形 实心
    // c.fill()

    // 结束路径
    c.closePath()
</script>
</html>

3，半圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>
    // 获取元素
    var my = document.getElementById('my')
    // 建立画布
    var c = my.getContext('2d')

    // 开始路径
    c.beginPath()
    // 画圆 参数：参数1：原点x，参数2：原点y，参数3：半径，参数4：起始弧度，参数5：结束弧度，参数6：(非必填)：false顺时针，true顺时针   | 角度0代表三点钟方向。math.pi可简单认为是180°
    c.arc(150,150,100,0,Math.PI,false)
    // 如果是填充圆形可不定点和画线,轮廓圆形如果不定点和画线会造成半圆没有封闭
    // 定点 移动你的笔
    c.moveTo(250,150)
    // 画线
    c.lineTo(50,150)

    //c.stroke轮廓和c.fill填充只能二选一
    // 更改轮廓颜色 红色
    c.strokeStyle='red'
    // 执行绘画 轮廓圆形
    c.stroke()
    // 更改填充颜色 红色
    // c.fillStyle='red'
    // 执行绘画 填充圆形 实心
    // c.fill()

    // 结束路径
    c.closePath()
</script>
</html>

4，八卦

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="my" width="500" height="500" style="border: 1px solid teal;"></canvas>
</body>
<script>
    var my = document.getElementById('my')
    var c = my.getContext("2d");

    //1.绘制最外边的大圆
    c.beginPath();
    c.arc(200, 200, 100, 0, 360 * Math.PI / 180);
    c.closePath();
    c.stroke();

    //2.绘制左边的实心半圆
    c.beginPath();
    c.arc(200, 200, 100, -90 * Math.PI / 180, 90 * Math.PI / 180, true);
    //true是逆时针，false默认值---顺时针
    c.closePath();
    c.fill();


    //3.绘制黑色圆
    c.beginPath();
    c.arc(200, 250, 50, 0, Math.PI * 2);
    c.closePath();
    c.fill();

    //4.上面的白色圆
    c.beginPath();
    c.arc(200, 150, 50, 0, Math.PI * 2);
    c.closePath();
    c.fillStyle = "#fff";
    c.fill();

    //5.绘制一黑一白圆形
    c.beginPath();
    c.arc(200, 250, 20, 0, Math.PI * 2);
    c.closePath();
    c.fill();

    //黑色圆
    c.fillStyle = "#000";
    c.beginPath();
    c.arc(200, 150, 20, 0, Math.PI * 2);
    c.closePath();
    c.fill();
</script>

</html>