据称由于 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
时间： 2024-10-18 16:03:28