canvas图标库大合集-持续更新-html5+js画小图片，零基础可使用

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

原创最新推荐文章于 2025-05-05 10:12:53 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html5 #javascript #图标 #画

web_前端_html5 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何使用HTML5的canvas元素结合JavaScript来创建和绘制图标，包括填充三角形和实现放大镜效果。提供了详细的JS代码结构和调用方式，并鼓励读者分享自己的JS画图经验。

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

严正声明：本文代码可以任意裁切(累赘可割)，新老手都适合。免费使用，欢迎伸手
新手请看：即便您只有一点点html基础，没有任何CSS+JS基础，也可以完美使用本图标库（在html页面用代码画图标）
话不多说，开始：
==================分割线 START======================

html5代码(请放到<body>标签中任意合适位置)：

此处的width,height决定了画出的图标的大小比例

<canvas id="fangDaJing" width="200" height="200"></canvas>

javascript代码(请放到上面canvas标签的下面)：

JS代码结构：

var MyPen = {

fillSanJiao: 填充三角形的函数实现 ,

fangDaJing: 放大镜的函数实现

}

JS调用方式：

var dom = document.querySelector("#fangDaJing");

MyPen.fangDaJing(dom);//默认样式，dom务必是canvas元素节点对象

//自定义颜色MyPen.fangDaJing(dom,"pink");

//自定义线条宽度MyPen.fangDaJing(dom,"",2);//js没有java工整，不设颜色就要传递空(或undefined)过去

//自定义颜色+线条宽度MyPen.fangDaJing(dom,"pink",5);

JS完整代码：

// ================画笔工具类=================
var MyPen = {
    //-----------填充三角形，obj节点,c颜色（可选）
    fillSanJiao: function (obj, c) {
        var o = obj.getContext("2d");
        if(c){
            o.fillStyle = c;
        }else{
            o.fillStyle = "#CCC";
        }
        o.moveTo(obj.width / 2, 0);
        o.lineTo(obj.width, obj.height);
        o.lineTo(0, obj.height);
        o.closePath();
        o.fill();
    },
    //-----------放大镜，obj节点,c颜色（可选）w线条宽度（可选)
    fangDaJing: function (obj, c, w) {
        var o = obj.getContext("2d");
        if(c){
            o.strokeStyle = c;
        }else{
            o.strokeStyle = "#A0A0A0";
        }
        var r = obj.width > obj.height ? obj.height / 3 : obj.width / 3;
        if (w) {
            o.lineWidth = w;
        } else {
            w = r / 5;
        }
        var a = r / Math.sqrt(2) + w;
        o.lineWidth = w;
        o.arc(r + w, r + w, r, 0,7);
        o.moveTo(r + a, r + a);
        o.lineTo(2 * r + a, 2 * r + a);
        o.stroke();
    }
};

[未完待续...]

如您也用JS画了一张“矢量图”,欢迎留言