用canvas绘画一些图形（图标）

最新推荐文章于 2025-05-05 10:12:53 发布

甜茶。。

最新推荐文章于 2025-05-05 10:12:53 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Eason_______/article/details/105497655

本文探讨了HTML5的canvas元素在网页图形绘制中的应用，包括制作图片线性渐变、渲染文字特效以及绘制箭头等图标。通过实例展示了如何使用canvas API创建八卦图等图形，为学习canvas提供实践指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在研究HTML5，发现其中的canvas用途很广。不但可以绘制图形，还可以制作图片线性渐变，而且还能渲染文字做成特效。
是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
canvas元素会在网页上创建一个空白区域（画布），然后通过API操作这个区域，与空白的div元素相似，用途完全不同（给予一块选中的画布，在其中操作）！
在网页中很多图标，都是用canvas绘画出来的，比如以前看到的那种箭头→这种都是可以画出来的！我们也做几个实例，画画

Html代码：  <canvas id="canvasFive" width="600" height="250">
                             
                       </canvas>

 js代码：      var canvas = document.getElementById("canvasFive");
                    var context = canvas.getContext("2d");
                    context.beginPath();
                    //设置是个顶点的坐标，根据顶点制定路径
                    for (var i = 0; i < 5; i++) {
                   context.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+200,
                         -Math.sin((18+i*72)/180*Math.PI)*50+200);
                  context.lineTo(Math.cos((54+i*72)/180*Math.PI)*20+200,
                         -Math.sin((54+i*72)/180*Math.PI)*20+200);
                   }
             context.closePath();
             //设置边框样式以及填充颜色
            context.lineWidth="3";
            context.fillStyle = "pink";
            context.strokeStyle = "wheat";
            context.fill();
            context.stroke();

在这里插入图片描述
效果就是这样，这些就是根据sin的绘画，多边形，还想要跟多边，就改变sin值！

下面给大家画一个学习canvas必须能掌握的东西，八卦图

<canvas id="myCanvas" width="600" height="600"></canvas>

    <script>
      
        var myCanvas = document.getElementById("myCanvas");
        // 通过画布元素获取到上下文（画笔）
        var ctx = myCanvas.getContext("2d");

        // 右边白色的半圆
        ctx.fillStyle = "#fff";
        ctx.beginPath();
        ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
        ctx.fill();

        // 左边黑色的圆
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);//逆时针画圆
        ctx.fill();

        // 左边白色的小圆
        ctx.fillStyle = "#fff";
        ctx.beginPath();
        ctx.arc(300, 250, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);
        ctx.fill();

        // 右边黑色的小圆
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
        ctx.fill();

        // 黑色的小圆点
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(300, 250, 5, 0, Math.PI * 2);
        ctx.fill();

        // 白色的小圆点
        ctx.fillStyle = "#fff";
        ctx.beginPath();
        ctx.arc(300, 350, 5, 0, Math.PI * 2);
        ctx.fill();
    </script>