【绘制】HTML5 Canvas 中颜色与透明度（图文、示例） |
您所在的位置：网站首页 › html透明属性 › 【绘制】HTML5 Canvas 中颜色与透明度（图文、示例） |
【绘制】HTML5 Canvas 中颜色与透明度（图文、示例）
|
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 核心属性Canvas实际应用中，颜色和透明度可以通过strokeStyle与fillStyle属性来设置。 可以用globalAlpha指定全局的透明度。 strokeStyle和fillStyle的属性值可以是任意有效的CSS颜色字串，在http://dev.w3.org/csswg/css3-color找到完整规范。 指定CSS颜色字串的方式： RGB(red/green/blue,红/绿/蓝)RGBA(red/green/blue/alpha,红/绿/蓝/透明度)HSL(hue/saturation/lightness,色相/饱和度/亮度)HSLA(hue/saturation/lightness/alpha,色相/饱和度/亮度/透明度)十六进制RGB标注法颜色名称(eg:"yellow","black"……)小技巧：你的浏览器可能并不支持全部的SVG1.0标准的颜色名称，因为工作组并不要求所有的CSS3实现程序都支持所有的属性或数值，所以就不包括全部颜色名称了。
提示：HSL颜色值 增加HSL支持的原因是RGB有两个缺陷： 它以硬件为导向。这种描述颜色的形式，是基于“阴极射线管”它不直观。 演示链接https://827652549.github.io/Canvas/Unit2/ColorAndOpaque.html 效果图
左边goldenrod颜色的矩形框是不透明的，右边的蓝色矩形框是半透明的。 案例代码 颜色与不透明度 var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.lineJoin = 'round'; context.lineWidth = 30; context.font = '24px Helvetica'; context.fillText('点击任何处以擦除', 175, 200); context.strokeStyle = 'goldenrod'; context.fillStyle = 'rgba(0,0,255,0.5)'; context.strokeRect(75, 100, 200, 200); context.fillRect(325, 100, 200, 200); context.canvas.onmousedown = function (ev) { context.clearRect(0, 0, canvas.width, canvas.height); } 最后要说的为什么strokeStyle和fillStyle不叫做strokeColor和fillColor呢？ 因为他们不仅可以设置颜色，还可以设置渐变色和图案，详细教程请移步本专栏下个文章。
|
【本文地址】