canvas 封装一个自己的 icon 库
canvas 封装一个自己的 icon 库
- 1. 概述
- 2. 实验目标
- 3. 实现思路解析与代码
- 3.1 创建文件
- 3.2 实现思路
- 3.3 完整代码
- 4. end
1. 概述
一个好的前端,是能够在保住性能的同时,让用户有优质的使用体验感,其中,icon就是很重要的一部分
可是许多时候,都是直接用PS切图,然后 url 引用
现在,有了 canvas,或许你会有不同的选择
本文章主要讲述如何简单封装一个自己的icon库,如果对 canvas 非常陌生的朋友,可以看一下我的另一篇文章 《canvas 从入门到入坟》
2. 实验目标
目标:制作如下图的图标封装,可自定义 width、height、color,
呦!搞错了,我没那么厉害,是下面这个~ [手动狗头 *3]
我个渣渣这里就做了2种类型的 icon,一种是 house 另一种是box [手动狗头 *3]
3. 实现思路解析与代码
3.1 创建文件
创建一个html和一个javascript
index.html
<span icon="house"></span>
<span icon="house" width="150" height="150" color="red"></span><span icon="box"></span>
<span icon="box" width="150" height="150" color="blue"></span><script src="demo.js"></script>
demo.js
// 选出所有有icon属性的span
let spanArray = document.querySelectorAll('[icon]')
let length = spanArray.length
3.2 实现思路
首先呢,应该把所有的带有icon属性的span选取出来
// 选出所有有icon属性的span
let spanArray = document.querySelectorAll('[icon]')
因为是简单封装,所有我并没有用到原型链,只用了基本的while语句循环 (可维护性、冗余量、性能等方面肯定会差些,不过没关系,我们只要思想就好了)
let length = spanArray.lengthlet index = 0
while (index < length) { }
由于canvas与svg不同,它是基于像素来绘制的,我用%的时候,js就给我报错了,所有我设置了比例,另外还定义了 color 这个属性以及默认值
// 参数和缩放比例
let [Width, Height, Color] = [span.getAttribute('width')||100, span.getAttribute('height')||100, span.getAttribute('color') || '#666']
let [dx, dy] = [Width / 100, Height / 100]
绘制过程种的 x y坐标都要 × 一个比例
ctx.fillRect(25 * dx, 25 * dy, 50 * dx, 50 * dy);
进行绘制之后,用appendchild把新建的元素塞进span里
let span = spanArray[index]
let c = document.createElement('canvas')
//这里是绘制过程
span.appendChild(c)
3.3 完整代码
index.html
<span icon="house"></span>
<span icon="house" width="150" height="150" color="red"></span>
<hr>
<span icon="box"></span>
<span icon="box" width="150" height="150" color="blue"></span><script src="demo.js"></script>
demo.js
// 选出所有有icon属性的span
let spanArray = document.querySelectorAll('[icon]')
let length = spanArray.lengthlet index = 0
while (index < length) {let span = spanArray[index]let icon = span.getAttribute('icon')// 参数和缩放比例let [Width, Height, Color] = [span.getAttribute('width')||100, span.getAttribute('height')||100, span.getAttribute('color') || '#666']let [dx, dy] = [Width / 100, Height / 100]let c = document.createElement('canvas')let ctx = c.getContext('2d')c.width = Widthc.height = Heightc.style.background = '#f0f0f0'if (icon == 'house') {ctx.beginPath();ctx.moveTo(50 * dx, 0 * dy);ctx.lineTo(100 * dx, 50 * dy);ctx.lineTo(90 * dx, 50 * dy)ctx.lineTo(90 * dx, 100 * dy)ctx.lineTo(70 * dx, 100 * dy)ctx.lineTo(70 * dx, 80 * dy)ctx.lineTo(30 * dx, 80 * dy)ctx.lineTo(30 * dx, 100 * dy)ctx.lineTo(10 * dx, 100 * dy)ctx.lineTo(10 * dx, 50 * dy)ctx.lineTo(0 * dx, 50 * dy);ctx.fillStyle = Colorctx.fill();}else if (icon = 'box') {ctx.fillStyle = Colorctx.fillRect(25 * dx, 25 * dy, 50 * dx, 50 * dy);}span.appendChild(c)index++
}
以house这个图标为例,左边的就是默认的,右边的就是自定义大小和颜色的。
4. end
最后,emmm,我自己画的就潦草了些哈,
这里附上Element-UI的icon库,喜欢自己捣鼓的朋友可以照着那里的来画
Element-UI官网 icon图标
如图是Element-UI官网 icon图库的一部分
加油!共勉~
canvas 封装一个自己的 icon 库相关推荐
- 微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
一.简介 在微信小程序开发中,有时候需要手写签名生成图片上传服务器.制作一个手绘板.画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard. DZMDrawingBoard 通过 Ca ...
- 浅析jQuery原理并仿写封装一个自己的库
[前言]最近项目忙的脚不沾地,刚刚结束,准备整理一下以前写的一些学习笔记和技术文章.本文原是很久之前看jq源码时写的片段,隔了很久再看都忘得差不多了.简单整理出来,做个记录. 作为一名前端工程师,jQ ...
- java绘制聊天气泡代码_封装一个canvas画对话气泡的函数
quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点.开始点由moveTo,或者前面一次的结束点作为下次调用的开始点 ...
- Js自行封装一个 Storge第三方库.
尝试使用 localstorge 自己封装一个 库 // localStorage function /***** @param {*} key 键* @param {*} nullValue 空值的 ...
- 封装一个类搞定90%安卓客户端与服务器端交互
本实例封装了一个处理安卓客户端与服务器端交互的几个方法,对于中文乱码问题本实例也找到了解决方案.本例可以处理的场景如下: 1.与服务器端交互json数据. 2.Get方式与服务器端交互数据. 3.Po ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- 封装自定义的redis切库工具类ByteArrayRedisTemplate,读取byte数组反序列化成List<Object>
封装自定义的redis切库工具类ByteArrayRedisTemplate,读取byte数组反序列化成List<Object>(使用lettuce连接池) 代码环境 框架:springb ...
- 一个强大的图表库 -- ECharts
ECharts 是百度发布非常良心一个产品 官网首页:http://echarts.baidu.com/ ECharts特征的介绍页:http://echarts.baidu.com/feature. ...
- Python之网络爬虫(验证码、代理IP、防反爬策略、封装一个抓取页面的函数)
文章目录 一.使用tesseract做OCR验证码识别 二.代理服务器设置 三.反爬与防反爬 四.封装一个抓取页面的函数 一.使用tesseract做OCR验证码识别 1.cookie, sessio ...
最新文章
- 华为怎么改输入法皮肤_搜狗输入法皮肤挑花眼?这次皮肤效果也能划着看了
- 为什么全局变量不好?[翻译]
- smartforms设置纸张打印格式
- 苹果手机投屏软件_苹果手机怎样投屏到电脑上操作,用什么软件?
- ms2005 SQL Server设置改为SQL Server身份验证
- android 图片跑马灯动画,ImageView 图片循环跑马灯的效果
- org.hibernate.hql.ast.QuerySyntaxException is not mapped异常
- Leetcode每日一题:381.insert-delete-getrandom-o1-duplicates-allowed(时间插入、删除和获取随机元素-允许重复)
- android plaid,Plaid 开源库学习
- Java光影教程_Minecraft SEUS PTGI 光影使用教程
- 推荐使用的JS日期时间格式化的方法
- (十九)论文阅读 | 目标检测之SNIP
- 大型超市计算机管理系统论文,大型超市进销存管理系统的设计与实现
- win7万能声卡驱动_我把一台PC的操作系统从win7换成了win10,它真的很棒!
- 分享一篇前端大佬关于前端职业规划的建议
- 计算机开机总要按f1键,详解Win7系统电脑开机需要按F1键才能启动的解决方法
- 教你学会u盘重装win10系统,u盘系统盘安装win10
- 鸿蒙core是什么,一文看懂HMS Core到底是什么
- 【转】用户管理模块:如何保证用户数据安全?
- hMailServer 配置
热门文章
- 中国首个芯片大学最快于本月底在南京挂牌;​华为方舟编译器正式支持 C 语言;Ora2Pg v21.0 发布|极客头条
- 太秀了!单片机内置 ADC 实现高分辨率采样?
- 杜甫在线演唱《奇迹再现》、兵马俑真人还原……用AI技术打破次元壁的大谷来参加腾讯全球数字生态大会啦!...
- VIP 时代,详解会员营销系统架构技术实践!
- 跨过虚拟化技术浪潮,这家企业快步入局云数据管理​
- 程序猿都应学习的语言:看 25 张图学 UML
- 听音乐不过瘾?自制一个音乐播放器!| 原力计划
- 再见 SIM 卡,你好 eSIM !华为回应不上市;熊猫直播正式关停 | 极客头条
- 如何做到毫秒级从百亿大表任意维度筛选数据?| 技术头条
- GitHub 疑被审查?著名“换脸”开源项目遭限制访问