如何通过canvas转换颜色为RGBA格式-创新互联
小编给大家分享一下如何通过canvas转换颜色为RGBA格式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联公司-专业网站定制、快速模板网站建设、高性价比项城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式项城网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖项城地区。费用合理售后完善,十年实体公司更值得信赖。转换任意颜色为RGBA格式
前端编程过程中,经常会遇到要把各种颜色格式(比如 “red”、“#F00”、“#FF0000”等)转换成RGBA格式,搜索网络也可以发现一堆的解决方案:
此处介绍一种方法: 通过canvas的像素获取方法,来获取任意颜色的RGBA数值。大致步骤如下:
首先创建一个尺寸为1*1的canvas,并获取canvas的绘制上下文ctx
设置ctx.fillStyle为指定的颜色
通过ctx.fillRect填充canvas
通过ctx.getImaegeData获取Imagedata对象,并获取其中的像素值,获取的像素值正好是RGBA格式的。
示例代码如下:
function getRgba(color) { var canvas = document.createElement("canvas"); canvas.width = 1; canvas.height = 1; var ctx = canvas.getContext('2d'); ctx.fillStyle = color; ctx.fillRect(0, 0, 1, 1); var colorData = ctx.getImageData(0, 0, 1, 1).data; return { r: colorData[0], g: colorData[1], b: colorData[2], a: colorData[3] }; }
注意性能问题
需要注意的是,如果上述方法频繁调用,则会有性能问题, 我公司一个小伙伴就出现过这样的性能问题。因为代码在频繁的创建canvas对象, 不断创建对象会有性能损耗,而JavaScript本身还需要在垃圾回收阶段不断的回收这些创建的对象,也是一次性能消耗。
好的处理方式是创建一个全局的canvas对象,每次都复用该对象。只用做很小的改动,参考下面的代码 :
var canvas = document.createElement("canvas"); canvas.width = 1; canvas.height = 1; var ctx = canvas.getContext('2d'); function getRgba(color) { ctx.fillStyle = color; ctx.fillRect(0, 0, 1, 1); var colorData = ctx.getImageData(0, 0, 1, 1).data; return { r: colorData[0], g: colorData[1], b: colorData[2], a: colorData[3] }; }
以上是“如何通过canvas转换颜色为RGBA格式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前文章:如何通过canvas转换颜色为RGBA格式-创新互联
转载源于:http://scyanting.com/article/cosiec.html