由canvas实现btn效果有感
前言
最近项目上有个工业自动化的需求,做一个按钮,有按下弹起效果,你肯定会说这不是so easy吗?是的,没错,用css,分分钟写一个,不过我们是做的拓扑图,用的canvas,因此我就想css画图也是gpu绘制,css能做的效果,我大canvas理应也能实现,于是我试着用css的实现方式做了一个canvas版的按钮效果。
css3版的立体按钮效果
想想我们用css怎么做一个按钮,首先我们就能想到按钮需要有阴影,我们可以使用box-shadow,他的语法如下:
/* x偏移量 | y偏移量 | 阴影颜色 */ box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */ box-shadow: inset 5em 1em gold;
/* 任意数量的阴影,以逗号分隔 */ box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;
首先我们定义一个btn类,先画出一个按钮的基础样式
.btn {border-radius: 5px;padding: 15px 25px;font-size: 22px;text-decoration: none;margin: 20px;color: #fff;position: relative;display: inline-block;
}
复制代码
然后我们定义一下按钮的背景色
.blue {background-color: #55acee;
}
复制代码
这是我们的按钮基础样式就完成了,如下所示:
接下来我们在来为按钮添加阴影
.btn:active {transform: translate(0px, 5px);-webkit-transform: translate(0px, 5px);box-shadow: 0px 1px 0px 0px;
}.blue {background-color: #55acee;box-shadow: 0px 5px 0px 0px #3C93D5;
}
复制代码
给y方向5px的偏移,就会有阴影的效果,有点立体感觉,然后按下按钮之后我们还要去掉阴影,然后按钮的位置要向下偏移响应的5px,这样效果如下所示:
canvas版的按钮效果
css的按钮我们已经知道了其实也就是利用box-shadow绘制阴影来实现按钮的样式,那么canvas我们怎么绘制阴影呢?翻一翻万能的mdn
shadowOffsetX = float
shadowOffsetX
和shadowOffsetY
用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为0
。
shadowOffsetY = float
shadowOffsetX 和
shadowOffsetY
用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为0
。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为
0
。
shadowColor = color
shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。
第一步我们先绘制矩形,绘制矩形我们使用moveTo和lineTo,因为按钮一般是带有圆角的,所以我们封装一个绘制圆角矩形的
createPath: function (x, y, width, height, radius) {this.ctx.moveTo(x, y + radius);this.ctx.lineTo(x, y + height - radius);this.ctx.quadraticCurveTo(x, y + height, x + radius, y + height);this.ctx.lineTo(x + width - radius, y + height);this.ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);this.ctx.lineTo(x + width, y + radius);this.ctx.quadraticCurveTo(x + width, y, x + width - radius, y);this.ctx.lineTo(x + radius, y);this.ctx.quadraticCurveTo(x, y, x, y + radius);},
复制代码
圆角矩形绘制完成后我们在接着绘制阴影,
setShadow: function (xoffset, yoffset) {var style = this.style;this.ctx.shadowOffsetX = xoffset || 0;this.ctx.shadowOffsetY = yoffset || 5;this.ctx.shadowBlur = 0;this.ctx.shadowColor = style.shadowColor;
},
复制代码
阴影绘制完后我们还要绘制文本,毕竟是canvas,绘制文本不像css那么方便,我们需要计算文字宽度来定位,代码如下:
drawText: function () {var xoffset = this.ctx.measureText(this.text).width;var x = this.x,y = this.y;if (this.state === 'active') {y = y + 5;}this.ctx.save();this.ctx.beginPath();this.ctx.font = "30px Micosoft yahei";this.ctx.fillStyle = this.fontColor;this.ctx.textBaseline = 'middle';this.ctx.textAlign = 'center';this.ctx.fillText(this.text, x + (this.width - xoffset) / 2 + 10, y + (this.height - 22) / 2 + 5, this.width);this.ctx.closePath();this.ctx.restore();},复制代码
另附textAlign和textBaseLine的说明:
textAlign:
textBaseLine:
这样效果就基本大功告成了
canvas事件可以具体看我的代码和我以前的博客
canvas发光效果
上面介绍了如何绘制canvas阴影立体按钮,接下来我们来实现试试更进一步的效果,多层阴影叠加效果,在css中我们的box-shadow可以叠加多层阴影效果,并且通过逗号分隔。那么我们canvas是不是也可以同样实现呢?我们知道canvas是基于状态的,我们如果要绘制多层阴影叠加,那么就需要保存每次绘制的阴影,层叠在一起,那么我们改下代码,每画一层阴影就需要保存一次canvas状态:
drawText: function (shadowx, shadowy, blur, shadowColor) {var xoffset = this.ctx.measureText(this.text).width;var x = this.x,y = this.y;this.ctx.save();this.ctx.beginPath();this.setShadow(shadowx, shadowy, blur, shadowColor);this.ctx.font = "300px Micosoft yahei";this.ctx.fillStyle = this.fontColor;this.ctx.textBaseline = 'middle';this.ctx.textAlign = 'center';this.ctx.fillText(this.text, x + (this.width - xoffset) / 2 + 10, y + (this.height - 22) / 2 + 5, this.width);this.ctx.closePath();this.ctx.restore();},setShadow: function (shadowx, shadowy, blur, shadowColor) {this.ctx.shadowOffsetX = shadowx || 0;this.ctx.shadowOffsetY = shadowy || 0;this.ctx.shadowBlur = blur || 10;this.ctx.shadowColor = shadowColor;},
复制代码
效果如下:
不太完美,有时间在继续优化,动画的发光还是不太柔和,与css比效果还是有点欠缺,以后再优化,先mark一下,不喜勿喷。
总结
知识都是由互通性的,多学习多思考,不能学了这个忘那个,要能融会贯通(互相抄袭借鉴)
参考链接
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-CN/docs/…
转载于:https://juejin.im/post/5c0e571be51d455278529204
由canvas实现btn效果有感相关推荐
- Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试 前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...
- html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
- java做橡皮擦效果_HTML5 canvas橡皮擦擦拭效果
这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 因为发代码有时会排版混乱,所以先发图演示了.源码已 ...
- 鼠标点击特效:canvas点击效果
JS代码(代码中包含了sketch.min.js的源码,如果你的网站已经引用了,请删掉下面的6到7行.): /** 鼠标点击特效:canvas点击效果*/ /* Copyright (C) 2013 ...
- canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果,包括更换笔触大小颜色.换背景图.橡皮檫.历史记录.清屏等功能,并能保存涂鸦图片到本地. 由于篇幅问题,本文主要实现橡皮檫和历史记录功能,该部分功能不操作背景图片,最终效果 ...
- canvas实现聚光灯效果(js)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
- html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
- 掌财社:前端接口怎么实现canvas动态图形效果?方法详情!
我们在通过上个文章中的分享我们知道大概有关于如何利用canvas来进行图形绘制这方面的相关内容,那么今天我们接着来说说有关于"前端接口怎么实现canvas动态图形效果?"这个问题的 ...
最新文章
- php mysql 500错误日志_服务器出现500错误的时候,让PHP显示错误信息
- jquery.chosen.js下拉选择框美化插件项目实例
- Exchange 2010与Exchange Online混合部署PART 5:配置边缘
- 三十一、CI框架之使用验证码
- post 返回代码_减少冗长代码,利用DDT轻松分离测试数据
- Ubuntu在vmware虚拟机无法上网的解决方法
- 【C++ Primer | 08】IO库
- 在WinCE中实现Screen Rotation(屏幕旋转)
- PHP 文件加密Zend Guard Loader 学习和使用(如何安装ioncube扩展对PHP代码加密)
- python pptp链接_pptp-client连接设置
- 十二赞日志收集与报警系统一览
- Spring Boot————Spring Data JPA简介
- nodeJs利用mongoose模块操作数据
- cpython知乎_Numpy为什么可以用C语言写?
- Android 通知栏消息
- Javascript第六章闭包closure规则第三课
- 基于python sklearn的 SVM支持向量机 类实现
- 科学计算机中log,科学计算器的科学用法.docx
- PS小知识(三)——画圆滑线及虚线
- Python学习两个月心得
热门文章
- 查找(四)-------基于B树的查找和所谓的B树
- Ising模型(伊辛模型)
- java 并发多线程显式锁概念简介 什么是显式锁 多线程下篇(一)
- Miller_Rabin测试法
- hashCode and equals in map
- 机器人伪装成人类在 GitHub 上为开源项目修复 bug
- 区分const,static,readonly,volatile四个关键字
- 无锁编程(三) - 忙等待
- C++ std::move/std::forward/完美转发
- 终极破产的原因——20年玩儿钱与玩观念的的新经济