jjzjj

html - 创建调色板,<img> 或 <div> 或 <canvas>?

coder 2023-08-03 原文

我目前正在使用 HTML、CSS 和 Javascript 开发一个颜色选择器组件,一个主要问题是我应该如何实现像这样的调色板:

忽略 IE8 或更早版本引入的浏览器兼容性问题,我有 3 种方法来实现:

  1. <img>方式:

    这很简单,多年来被许多颜色选择器组件使用,我们使用 <img src="palette.png" /> 简单地包含一张与上面的完全相同的图像。 .

    问题是<img>会引入额外的网络往返,虽然我们可以使用 dataURI 阻止它,但是图像数据对我来说有点太大

  2. <div>方式:

    这样我们应该使用2 <div>元素,其中一个提供从左到右的线性渐变,另一个提供从上到下的 alpha 渐变,样式应为:

    <style>
        #map {
            width: 400px; 
            height: 400px;
            background: -webkit-gradient(
                linear, left top, right top, 
                color-stop(0%,#ff0000), 
                color-stop(16.67%,#ffff00), 
                color-stop(33.33%,#00ff00),
                color-stop(50%,#00ffff), 
                color-stop(66.67%,#0000ff),
                color-stop(83.33%,#ff00ff), 
                color-stop(100%,#ff0000)
            );
        }
        #overlay {
            width: 400px;
            height: 400px;
            background: -webkit-gradient(
                linear, left top, left bottom, 
                from(rgba(0, 0, 0, 0)), 
                to(rgba(0, 0, 0, 1))
            );
        }
    </style>
    
    <div id="palette"><div id="overlay"></div></div>
    

    它工作得很好,但问题是,这个方法只引入了 2 个样式元素,即 2 <div>元素没有任何语义含义,也不充当通用容器或 block ,这违反了语义 HTML

  3. <canvas>方式:

    <canvas>提供了非常灵活的图形 API 来实现这样的调色板,我使用这些代码来绘制它:

    var context = canvas.getContext('2d');
    
    var palette = context.createLinearGradient(0, 0, 360, 0);
    palette.addColorStop(0 / 6, '#ff0000');
    palette.addColorStop(1 / 6, '#ffff00');
    palette.addColorStop(2 / 6, '#00ff00');
    palette.addColorStop(3 / 6, '#00ffff');
    palette.addColorStop(4 / 6, '#0000ff');
    palette.addColorStop(5 / 6, '#ff00ff');
    palette.addColorStop(6 / 6, '#ff0000');
    context.fillStyle = palette;
    context.fillRect(0, 0, 360, 360);
    
    var overlay = context.createLinearGradient(0, 0, 0, 360);
    overlay.addColorStop(0, 'rgba(0, 0, 0, 0)');
    overlay.addColorStop(1, 'rgba(0, 0, 0, 1)');
    context.fillStyle = overlay;
    context.fillRect(0, 0, 360, 360);
    

    和上面2种方法效果一样好,但是我想知道我是否应该使用canvas来绘制这样的静态图像,canvas不应该用于更动态和复杂的环境吗?

那么我应该采用哪种方式来实现一个简单的调色板,或者有更好的方法吗?

最佳答案

如果您想使用图像,但不想要额外的请求,您可以使用 data URI :

<img width="184" height="184" title="" alt="" src="data:image/png;base64,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" />

Demo

关于html - 创建调色板,<img> 或 <div> 或 <canvas>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9798154/

有关html - 创建调色板,<img> 或 <div> 或 <canvas>?的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  5. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为

  6. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  7. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务? - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务?require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录;它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  8. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  10. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串? - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?

随机推荐