在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学习]使用颜色和透明度的更多相关文章

  1. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  2. HTML5 canvas 学习

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  3. HTML5 canvas学习笔记(一)

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...

  4. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  5. Html5 Canvas学习

    canvas: 首先在html页面中加入canvas标签 <canvas id="canvas" width="1024" height="74 ...

  6. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  7. Html5 Canvas学习之路(五)

    Canvas 图像(上) Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上.还可以裁切.拼贴图像数据,以显示用户需要的部分.此外,Canvas还提供了像素数据的存储功能,这样就能对 ...

  8. HTML5 Canvas学习之路(六)

    一个炫酷的计时器 在慕课网看到一个canvas的课,感觉很炫酷,就把它看完了,然后记下来.http://www.imooc.com/learn/133 第一步:绘制要显示的时间 拿小球来绘制具体的数字 ...

  9. canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

随机推荐

  1. MVVM模式中WPF数据的完全绑定

    一:截图,描述:将后台代码的姓名.年龄绑定到文本框,单击”增加年龄“--年龄自+1,单击”显示年龄“--弹出年龄的显示对话框,实现了从文本框修改年龄和后台更改年龄并显示到文本框 运行结果和解决方案管理 ...

  2. hdu 1754 线段树模板题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 #include <cstdio> #include <cmath> # ...

  3. Apache-Tika解析Excell文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理Excell格式的文章,如下: package com.mengyao.tika.app; ...

  4. 服务器CPU使用率高的原因分析与解决办法

    我们的服务器在使用操作系统的时候,用着用着系统就变慢了,打开“ 任务管理器 ”一看,才发现CPU使用率达到80%以上.这是怎么回事情呢?遇到病毒了吗?硬件有问题?还是系统设置有问题呢?在本文中将从硬件 ...

  5. 自我理解foreach工作原理

        很多时候我们在使用for循环遍历一个数组的时候,我们都知道可以通过下标的索引找到当前数组中所对应的数据.这只对于简单的数组或集合,如果我们存储的数据不止只有数据项,还有一个标识项,就如同Has ...

  6. CSS控制LI行字符溢出用省略号取代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. migrate from weblogic to tomcat: directory mapping--reference

    Question: I am trying to migrate from weblogic to tomcat. in weblogic I have <virtual-directory-m ...

  8. java 线程三种实现方式

    1继承thread public class MultiThread1 extends Thread{ public void run(){ for(int i=0; i<7; i++){ Sy ...

  9. 剪切板 复制文本 ClipboardManager

    代码 public class MainActivity extends ListActivity {     private EditText tv_info;     private Clipbo ...

  10. COGS 渡轮问题 (LIS规定字典序输出方案数)

    /* 下标字典序最小 */ #include<iostream> #include<cstdio> #include<cstring> #define maxn 1 ...