[HTML5 Canvas学习]使用颜色和透明度
在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重画矩形
<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>
[HTML5 Canvas学习]使用颜色和透明度的更多相关文章
- [HTML5 Canvas学习] 基础知识
HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...
- HTML5 canvas 学习
一.canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...
- HTML5 canvas学习笔记(一)
canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- Html5 Canvas学习
canvas: 首先在html页面中加入canvas标签 <canvas id="canvas" width="1024" height="74 ...
- [HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...
- Html5 Canvas学习之路(五)
Canvas 图像(上) Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上.还可以裁切.拼贴图像数据,以显示用户需要的部分.此外,Canvas还提供了像素数据的存储功能,这样就能对 ...
- HTML5 Canvas学习之路(六)
一个炫酷的计时器 在慕课网看到一个canvas的课,感觉很炫酷,就把它看完了,然后记下来.http://www.imooc.com/learn/133 第一步:绘制要显示的时间 拿小球来绘制具体的数字 ...
- canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
随机推荐
- wamp中的httpd.conf文件设置
ServerName localhost 缺省情况下,并不需要指定这个ServerName参数,服务器将自动通过名字解析过程来获得自己的名字,但如果服务器的名字解析有问题(通常为反向解析不正确),或者 ...
- [Audio processing] Harmonic change detection function (HCDF)
Harmonic change detection function (HCDF) 是根据 Tonal Centroid (TC)实现的,首先TC如何提取? Step 1. 提取PCP特征 Step ...
- Cstyle的UEFI导读之SEC第一篇 Reset Vector
最近小看了一下SEC部分的code,现在来做个总结.所谓SEC就是CPU刚刚完成硬件初始化的是时候执行的和CPU体系架构息息相关的代码.主要是为后续CPU以及Chipset初始化代码所需的必备 ...
- J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题
J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题 2012年03月09 ...
- 如何发送HTML表单数据
多数时候,HTML表单的目的只是为了把数据发给服务器,之后服务器再处理这些数据并发送响应给用户.虽然看起来挺简单的,但我们还是得注意一些事情以确保传送的数据不会破坏服务器.或者给你的用户制造麻烦. 数 ...
- 你真正的了解Ajax?Ajax技术简述
Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...
- readlink
readlink命令 标签: ubuntulinux工具file 2012-03-15 14:06 3674人阅读 评论(1) 收藏 举报 分类: linux系统(184) C语言(92) re ...
- setClickable(false)问题处理
在项目中遇到一个小问题 就是 设置btn的 点击不可以 setClickable(false) 结果发现还是有问题 查了半小时代码之后 才发现 是顺序问题 如果先设置点击监听setOnClickLi ...
- Deme_遥感控制物体移动(涉及遮罩,小摄像机跟随)
using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class JoyControl ...
- 动态规划晋级——POJ 3254 Corn Fields【状压DP】
转载请注明出处:http://blog.csdn.net/a1dark 分析:刚开始学状压DP比较困难.多看看就发现其实也没有想象中那么难.这道题由于列数较小.所以将行压缩成二进制来看.首先处理第一行 ...