[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所有的基础知识,并且有众多练习案例, ...
随机推荐
- 数据结构(set):COGS 62. [HNOI2004] 宠物收养所
62. [HNOI2004] 宠物收养所 ★★★ 输入文件:pet.in 输出文件:pet.out 简单对比时间限制:1 s 内存限制:128 MB 最近,阿Q开了一间宠物收养所.收养 ...
- Remove Duplicates from Sorted List II ——LeetCode
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
- 动态规划——G 回文串
G - 回文串 Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Stat ...
- Django教程:第一个Django应用程序(3)
Django教程:第一个Django应用程序(3) 2013-10-08 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...
- 嵌入式C语言优化小技巧
嵌入式C语言优化小技巧 1 概述 嵌入式系统是指完成一种或几种特定功能的计算机系统,具有自动化程度高,响应速度快等优点,目前已广泛应用于消费电子,工业控制等领域.嵌入式系统受其使用的硬件以及运行环境的 ...
- 【转】仿Android 联系人SideBar排序,根据拼音A-Z字母快速导航,以及输入搜索条件过滤,显示姓名的文字图片
1.首先我们把这几个工具类拷贝到自己的项目中,这些都是很常见的类: CharacterParser –这是用来把中文转成拼音的工具类 PinyinComparator –拼音首字母的比 ...
- iOS开发系列之触摸事件
基础知识 三类事件中触摸事件在iOS中是最常用的事件,这里我们首先介绍触摸事件. 在下面的例子中定义一个KCImage,它继承于UIView,在KCImage中指定一个图片作为背景.定义一个视图控制器 ...
- Could not fetch https://api.github.com/repos/RobinHerbots/jquery
使用 composer 安装YII2时, 如题所示提示, 原因是由于yii安装中, 需要有一些相关的认证[或许说是composer的认证], 如有如下提示 Could not fetch https: ...
- linux 之 yum 介绍 <转>
原文在这里 http://doophp.sinaapp.com/archives/linux/yum-setting-parameter.html 因为是程序员出身,平时虽然经常接触服务器,偶尔也会 ...
- NYOJ-520 最大素因子
这个题基本上就两个知识点, 一个素数筛选法求素数,另一个是求最大公因子, 不过确定最大素数在素数表中的位置时,要用到二分的思想,不然会超时,下面是具体代码的实现; #include <stdio ...