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

来源：互联网发布：苹果mac原装壁纸下载编辑：程序博客网时间：2024/06/05 16:59

严正声明：本文代码可以任意裁切(累赘可割)，新老手都适合。免费使用，欢迎伸手
新手请看：即便您只有一点点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画了一张“矢量图”,欢迎留言

阅读全文

2 0