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

这篇博客介绍了如何使用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画了一张“矢量图”,欢迎留言

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值