[HTML5 Canvas学习]使用颜色和透明度
2014-05-01 13:47
615 查看
在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串。可以用RGB、RGBA、HSL、HSLA以及十六进制RGB标注来指定颜色,也可以通过 “yellow”、“silver”、“teal”这样的颜色名称来指定。除此之外,还可以使用SVG1.0规范中的颜色名称,比如“goldenrod”、“darksalmon”、“chocolate”。
在http://dev.w3.org/csswg/css-color/上可以找到一份完整的规范书!
下面使用strokeStyle和fillStyle重画矩形
在http://dev.w3.org/csswg/css-color/上可以找到一份完整的规范书!
下面使用strokeStyle和fillStyle重画矩形
<script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.lineJoin = 'round'; context.lineWidth = 20; context.strokeStyle = 'goldenrod'; context.fillStyle = 'rgba(0, 0, 255, 0.3)'; context.strokeRect(10, 10, 150, 100); context.fillRect(180, 10, 150, 100); </script>
相关文章推荐
- 【猪猪-前端】微信打飞机高质量Demo,学习HTML5+Canvas技术编写,下载即可使用,注释齐全。
- HTML5学习-使用 Canvas 来创建绘图应用程序
- HTML5学习笔记之使用canvas绘制矩形
- 【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案
- HTML5学习(2) canvas标签的使用二
- HTML5 学习笔记13-Canvas使用路径
- HTML5学习(2) canvas标签的使用三
- 详解HTML5 Canvas绘制时指定颜色与透明度的方法
- html5学习笔记---03. Canvas简介,Canvas的使用方法
- HTML5 Canvas学习---第六章 《用颜色和梯度填充对象》
- html5 canvas学习--操作与使用图像
- html5 canvas学习--设置图形的透明度
- HTML5学习(2) canvas标签的使用四
- html5学习笔记---03. Canvas简介,Canvas的使用方法
- HTML5学习(2) canvas的使用一
- HTML5 学习笔记12-Canvas标签的使用
- DayDayUP之HTML5学习笔记五---Canvas简单的使用
- HTML5 Canvas 颜色填充学习
- html5学习canvas基本使用:div在js前面;localStorage存储根据浏览器在不同的位置;应用程序缓存;placeholder 属性提供一种提示(hint),描述输入域所期待的值。
- html5学习笔记(6)使用canvas绘图2