颜色、样式和阴影

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的更多相关文章

  1. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关

    strokeStyle定义和用法 strokeStyle 属性设置或返回用于笔触的颜色.渐变或模式. context.strokeStyle=color|gradient|pattern;//指示绘图 ...

  3. es的相关知识二(检索文档)

    一.es的使用 1.检索文档: 想要从Elasticsearch中获取文档,我们使用同样的 _index  . _type  . _id  ,但是HTTP方法改为 GET  : GET /{index ...

  4. Python 数据分析(二 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识

    Python 数据分析(二) 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识 第1节 groupby 技术 第2节 数据聚合 第3节 分组级运算和转换 第4 ...

  5. 使用Nginx+uwsgi在亚马逊云服务器上部署python+django项目完整版(二)——部署配置及相关知识

    ---恢复内容开始--- 一.前提: 1.django项目文件已放置在云服务器上,配置好运行环境,可正常运行 2.云服务器可正常连接 二.相关知识 1.python manage.py runserv ...

  6. 客户端相关知识学习(十二)之iOS H5交互Webview实现localStorage数据存储

    前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...

  7. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  9. HT for Web基于HTML5的图像操作(二)

    上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能 ...

随机推荐

  1. JavaScript要点(十七) Math 对象

    来源:JavaScript 参考手册 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...

  2. 浅析WINFORM工具条的重用实现

    一直以来,我都想看看别人家的工具栏重用(图1)到底是如何实现的,但在网上搜索了很久都没有找到过,即使找到一些程序,要么就是把这个工具栏写在具体的画面(图2),要么就是没有源代码的, 我在想,是否别人也 ...

  3. Cortex-M3 Context Switching

    http://www.embedded.com/design/embedded/4231326/Taking-advantage-of-the-Cortex-M3-s-pre-emptive-cont ...

  4. 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 ...

  5. Looksery Cup 2015 B. Looksery Party 暴力

    B. Looksery Party Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/pro ...

  6. 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. ...

  7. box-flex等分总结

    首先要知道在应用 box-flex 时必须给父容器定义 css 属性 display:box 其子容器才可以进行划分. .box{ display: -webkit-box; display: -mo ...

  8. 10905 - Children's Game

    4th IIUC Inter-University Programming Contest, 2005 A Children’s Game Input: standard input Output: ...

  9. centos复制到另外一台电脑连不上网

    http://snow-berry.iteye.com/blog/1991754 从一台电脑virtual box克隆出来的centos.vdi复制到另外一台电脑,找不到网卡,提示Device eth ...

  10. iOS-UITextField中给placeholder动态设置颜色的四种方法

    思路分析: 0.自定义UITextField 1.设置占位文字的颜色找-->placeholderColor,结果发现UITextField没有提供这个属性 2.在storyboard/xib中 ...