html5 之 canvas 相关知识(二)API-fillStyle
颜色、样式和阴影
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
定义和用法
context.fillStyle=color|gradient|pattern;//指示绘图填充色的CSS颜色值|用于填充绘图的渐变对象线性或放射性|用于填充绘图的 pattern 对象
实例一:矩形绘制,也是最简单的使用方法。
context.fillStyle=color
<canvas id="canvas" width=300 height=150></canvas>
<script>
var myCanvas = document.getElementById("canvas");
var cc = myCanvas.getContext("2d");
cc.fillStyle = "#ff0000";
cc.fillRect(100,25,100,100);//四个参数分别对应:x,y,w,h
</script>
效果图
实例二:从上到下的渐变,矩形填充。
context.fillStyle=gradient
<canvas id="canvas" width=300 height=150></canvas> <script>
var myCanvas = document.getElementById("canvas");
var cc = myCanvas.getContext("2d");
var myGradient=cc.createLinearGradient(0,0,0,170);
myGradient.addColorStop(0,"#ff0000");
myGradient.addColorStop(1,"#ffcc00");
cc.fillStyle=myGradient;
cc.fillRect(100,25,100,100);
</script>
效果图
createLinearGradient() 方法创建线性的渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示:请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
提示:请使用 addColorStop 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。
context.createLinearGradient(x0,y0,x1,y1);//渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标
实例三:定义一个从左到右,由黑到红再到白的渐变,作为矩形的填充样式:
<canvas id="canvas" width=300 height=150></canvas>
<script>
var myCanvas = document.getElementById("canvas");
var cc = myCanvas.getContext("2d");
var myGradient=cc.createLinearGradient(100,0,200,0);
myGradient.addColorStop(0,"black");
myGradient.addColorStop(0.5,"red");
myGradient.addColorStop(1,"white");
cc.fillStyle=myGradient;
cc.fillRect(100,25,100,100);
</script>
实例四:绘图填充
context.fillStyle=pattern
<p align="center"><img src="img/lamp.gif" id="lamp" alt=""></p>
<canvas id="canvas2" width=300 height=150></canvas> <script>
var img=document.getElementById("lamp");
function drawImgRepat(){
var c=document.getElementById("canvas2");
var ctx=c.getContext("2d");
var pat=ctx.createPattern(img,"repeat");//repeat|repeat-x|repeat-y|no-repeat
ctx.rect(0,0,128,96);
ctx.fillStyle=pat;
ctx.fill();
}
img.onload = drawImgRepat;
</script>
这里发现 一点小问题:1、图片需要在页面中;2、rect(0,0,128,96),如果改变开始x.y坐标,发现图片显示不完整,也就是说图片开始位置永远是0,0
html5 之 canvas 相关知识(二)API-fillStyle的更多相关文章
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关
strokeStyle定义和用法 strokeStyle 属性设置或返回用于笔触的颜色.渐变或模式. context.strokeStyle=color|gradient|pattern;//指示绘图 ...
- es的相关知识二(检索文档)
一.es的使用 1.检索文档: 想要从Elasticsearch中获取文档,我们使用同样的 _index . _type . _id ,但是HTTP方法改为 GET : GET /{index ...
- Python 数据分析(二 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识
Python 数据分析(二) 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识 第1节 groupby 技术 第2节 数据聚合 第3节 分组级运算和转换 第4 ...
- 使用Nginx+uwsgi在亚马逊云服务器上部署python+django项目完整版(二)——部署配置及相关知识
---恢复内容开始--- 一.前提: 1.django项目文件已放置在云服务器上,配置好运行环境,可正常运行 2.云服务器可正常连接 二.相关知识 1.python manage.py runserv ...
- 客户端相关知识学习(十二)之iOS H5交互Webview实现localStorage数据存储
前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- html5之canvas画图基础
HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...
- HT for Web基于HTML5的图像操作(二)
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能 ...
随机推荐
- JavaScript要点(十七) Math 对象
来源:JavaScript 参考手册 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...
- 浅析WINFORM工具条的重用实现
一直以来,我都想看看别人家的工具栏重用(图1)到底是如何实现的,但在网上搜索了很久都没有找到过,即使找到一些程序,要么就是把这个工具栏写在具体的画面(图2),要么就是没有源代码的, 我在想,是否别人也 ...
- Cortex-M3 Context Switching
http://www.embedded.com/design/embedded/4231326/Taking-advantage-of-the-Cortex-M3-s-pre-emptive-cont ...
- Wunder Fund Round 2016 (Div. 1 + Div. 2 combined) A. Slime Combining 水题
A. Slime Combining 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2768 Description Your frien ...
- Looksery Cup 2015 B. Looksery Party 暴力
B. Looksery Party Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/pro ...
- ubuntu在xampp下安装memcache扩展
sudo wget http://pecl.php.net/get/memcache-2.2.1.tgz sudo tar vxzf memcache-2.2.1.tgz cd memcache-2. ...
- box-flex等分总结
首先要知道在应用 box-flex 时必须给父容器定义 css 属性 display:box 其子容器才可以进行划分. .box{ display: -webkit-box; display: -mo ...
- 10905 - Children's Game
4th IIUC Inter-University Programming Contest, 2005 A Children’s Game Input: standard input Output: ...
- centos复制到另外一台电脑连不上网
http://snow-berry.iteye.com/blog/1991754 从一台电脑virtual box克隆出来的centos.vdi复制到另外一台电脑,找不到网卡,提示Device eth ...
- iOS-UITextField中给placeholder动态设置颜色的四种方法
思路分析: 0.自定义UITextField 1.设置占位文字的颜色找-->placeholderColor,结果发现UITextField没有提供这个属性 2.在storyboard/xib中 ...