新手请看:即便您只有一点点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画了一张“矢量图”,欢迎留言