canvas学习之fillStyle
来源:互联网 发布:鲁南制药知乎 编辑:程序博客网 时间:2024/05/02 04:37
一、fillStyle设置颜色
fillStyle="#ffffff"; fillStyle="#642"; fillStyle="rgb(255,128,0)"; fillStyle="rgba(100,100,100,0,8)"; fillStyle="hsl(20,62%,28%)"; fillStyle=“hsla(40,80%,33%,0.6)”; fillStyle="black";
二、fillStyle设置渐变色(线性渐变色和径向渐变色)
1、fillStyle之线性渐变色(Linear Gradient)
var linearGrad=context.createLinearGradient(0,0,1000,500); //线性渐变得方向和尺度 linearGrad.addColorStop(0.0,"#fff"); //线性渐变的关键色位置和颜色(可设置多个) linearGrad.addColorStop(0.25,"pink"); linearGrad.addColorStop(0.5,"blue"); linearGrad.addColorStop(0.75,"yellow"); linearGrad.addColorStop(1.0,"black"); context.fillStyle=linearGrad;
2、fillStyle之径向渐变色(Raidal Gradient)
var radialGrad=context.createRadialGradient(500,250,0,500,250,200); //径向渐变的圆环的两个圆心点几其半径 radialGrad.addColorStop(0.0,"#fff"); radialGrad.addColorStop(0.25,"pink"); radialGrad.addColorStop(0.5,"blue"); radialGrad.addColorStop(0.75,"yellow"); radialGrad.addColorStop(1.0,"black"); context.fillStyle=radialGrad;
三、fillStyle填充(createPatten)(图片,video)
1、填充图片
<pre name="code" class="javascript"> var bgImage=new Image(); bgImage.src="blocks.jpg"; bgImage.onload=function(){ var pattern=context.createPattern(bgImage,"repeat");//no-repeat,repeat-x,repeat-y,repeat context.fillStyle=pattern; context.fillRect(0,0,1000,500); }2、填充video
createPattern(video,"no-repeat");
0 0
- canvas学习之fillStyle
- Canvas填充样式fillStyle
- html5 canvas绘图之fillStyle,strokeStyle的区别
- <html5 canvas>fillStyle属性和strokeStyle属性
- canvas之标签学习
- HTML5学习之-Canvas
- 绘图之Canvas学习
- HTML5简明教程-1.1.1.HTML5Canvas参考手册 之 填充fillStyle
- Html5 Canvas 系列_绘图三(fillStyle 样式填充 矩形、墙)
- HTML5 canvas 中的 fillstyle fillrect strokeStyle strokeRect fill stroke rect 的简单理解
- Android-Graphics学习之:canvas
- canvas之阴影效果学习
- Canvas 学习之 (2) translate
- Canvas 学习之 (3) scale
- Canvas 学习之 (4) rotate
- canvas学习之API汇总
- Canvas学习之基础一
- Canvas学习笔记之画线
- Spring4.0.6 Websocket详细配置
- 网页特殊符号HTML代码总结记录
- C++面向对象编程分享12----系统设计02---跟踪用户行为
- Servlet规范中的核心接口类图
- Android官方开发文档Training系列课程中文版:OpenGL绘图之图形绘制
- canvas学习之fillStyle
- 线程的生命周期
- 不推荐看
- word2vec
- 【SSH网上商城项目实战26】完成订单支付后的短信发送功能
- poj 3461
- c++实验6-项目一数组操作
- 24位真彩色工具栏
- 将一个数第i位置1,将一个数第i位置0