码迷,mamicode.com
首页 > Web开发 > 详细

出自 HTML4 规范的可用颜色字符串值列表

时间:2017-09-05 10:00:54      阅读:509      评论:0      收藏:0      [点我收藏+]

标签:lov   element   图片   英语   lang   code   hex   for   方便   

据称由于 HTML5 没有修改专属的颜色,HTML4 的颜色都可以在 HTML5 中正确显示。

出自 HTML4 规范的可用颜色字符串值列表如下,此表来源是 http://www.lovean.com/view-3-132910-0.html , 我把原表中的“石灰色”修改成了“青柠色”,因为这更符合该颜色的原意(原表中把lime翻译成石灰色不知怎么回事)。另外原表是图片格式的,不方便拷贝,下表是文本格式的,可以直接拷贝使用。

序号 汉字名称 英语名称 十六进制颜色值
1 黑色 black #000000
2 绿色 green #008000
3 银色 silver #c0c0c0
4 青柠色 lime #00ff00
5 灰色 gray #808080
6 白色 white #ffffff
7 黄色 yellow #ffff00
8 栗色 maroon #800000
9 海蓝色 navy #000080
10 红色 red #ff0000
11 蓝色 blue #0000ff
12 紫色 purple #800080
13 蓝深绿色 teal #008080
14 紫红色 fuchsia #ff00ff
15 浅蓝绿色 aqua #00ffff

因为网络文章不是那么可信,有必要自己验证一下,于是我将这些颜色在Canvas里显示了一下,确定没有问题,显示效果如下:

技术分享

显示这些颜色的代码如下:

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>出自 HTML4 规范的可用颜色字符串值列表</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="240px" height="470px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){

        var canvas=document.getElementById(myCanvus);
        canvas.height=470;
        canvas.width=240;
        var context=canvas.getContext(2d);
         context.fillStyle = "#88aacc";
        context.fillRect(0, 0, canvas.width, canvas.height);

        var colors=[
            {title:黑色,     name:black,hex:#000000},
            {title:绿色,     name:green,hex:#008000},
            {title:银色,     name:silver,hex:#c0c0c0},
            {title:青柠色, name:lime,hex:#00ff00},
            {title:灰色,     name:gray,hex:#808080},
            {title:白色,     name:white,hex:#ffffff},
            {title:黄色,     name:yellow,hex:#ffff00},
            {title:栗色,     name:maroon,hex:#800000},
            {title:海蓝色, name:navy,hex:#000080},
            {title:红色,     name:red,hex:#ff0000},
            {title:蓝色,     name:blue,hex:#0000ff},
            {title:紫色,     name:purple,hex:#800080},
            {title:蓝深绿色,name:teal,hex:#008080},
            {title:紫红色,  name:fuchsia,hex:#ff00ff},
            {title:浅蓝绿色, name:aqua,hex:#00ffff},
       ];

        var x=10;
        var y=0;
        // 遍历JSON
       for(var i=0; i<colors.length; i++)  
      {  
            y+=30;
            var color=colors[i];
            //alert(color.title+" -" + color.name+" -" + color.hex)  

            context.font="bold 16px 宋体";
            context.fillStyle=color.name;
            context.fillText(color.title+"," + color.name+" ," + color.hex ,x,y);
      } 
};



//-->
</script>

2017年9月5日09:02:35

出自 HTML4 规范的可用颜色字符串值列表

标签:lov   element   图片   英语   lang   code   hex   for   方便   

原文地址:http://www.cnblogs.com/xiandedanteng/p/7476701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!