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函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能 ...
随机推荐
- windows win7 win10 多系统启动菜单 多系统引导设置
win键+R 输入msconfig 根据显示的程序设置(除非你看不懂文字)
- js查看浏览器类型和版本
var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; var scan; (s = ua.match(/msie ([\d. ...
- li在IE中底部空行的BUG
li在IE中底部空行的BUG 但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:HTML代码: <ul> <li><a href="#" ...
- JavaScript中伪协议 javascript:研究
将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的 ...
- linux C 执行多个文件
- C# 的时间戳转换
/// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name="timeStamp"> ...
- direction:rtl demo
<style> body {font:14px/18px Consolas;} div { width:100px;padding:10px; margin:10px 0px 30px 0 ...
- [原创]Microsoft.AnalysisServices.ManagementDialogs.ServerPropertiesLanguagePanel 的类型初始值设定项引发异常
问题: 安装SQL SERVER 2012 SP1后,有可能在右键AS服务器想打开属性面板时候会出现如下错误: 解决: 这个需要安装相应的热修复补丁470544 相应文章: http://smal ...
- 解决ajax.net 1.0中文乱码问题!
在使用ajax.net的UpdatePanel的时候,当requestEncoding编码为GB2312的时候,出现乱码.如果要解决这个问题最简单的就是改用utf-8了,但是原来使用GB2312, ...
- php调试工具总结
一:XDebug+Webgrind 二:XHProf