Canvas:样式及颜色
来源:互联网 发布:腾讯大王卡扫号软件 编辑:程序博客网 时间:2024/05/17 04:03
- 色彩 Colors
- 透明度Transparency
- 线型
- 渐变Gradients
- 图案样式Patterns
- 阴影Shadows
- Canvas填充规则
色彩 Colors
fillStyle:填充色 fillStyle = color
**strokeStyle描边色**strokeStyle = color
透明度Transparency
globalAlpha: globalAlpha = 0.2 ;
rgba(): fillStyle = ‘rgba(r,g,b,0.2)’;
区别: 都可以作为做出透明度效果,但是从不同的样式中有不同的优势,global alpha 可以设置指定的透明度多层添加,而rgba动态的设定部分路径的透明度。
线型
lineWidth : 设置线条宽度 lineWidth = 10;
之前提过默认宽度为2是错误的,默认宽度为1,但是由于从整数像素点起向四周扩充0.5就导致了看似为2的效果,正确的解决方法应是从0.5像素画起;且线宽为奇数
lineCap : 设置末端样式 lineCap = ‘buff’
butt: 默认
round: 圆滑,半径 = 1/2 * 线宽
square: 矩形,高 = 1/2 * 线宽lineJoin : 设置交界处的样式 lineJoin = ‘round’
round: 圆滑,半径 = 1/2 * 线宽>>bevel: 受miterLimit影响
miter: 默认,边角互连。miterLimit : 限制交点的最大长度
setLineDash(): 返回一个包含当前虚线样式,长度为非负的数组: getLineDash([5,2]);
lineDashOffset: 设置虚线的起始偏移量 lineDashOffset = 1;
渐变Gradients
//线性渐变var lineargradient = ctx.createLinearGradient(0,0,150,150);lineargradient.addColorStop(0,'white');lineargradient.addColorStop(1,'black');ctx.fillStyle = lineargradient;//径向渐变var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);radialgradient .addColorStop(0, '#FF5F98'); radialgradient .addColorStop(0.75, '#FF0188'); radialgradient .addColorStop(1, 'rgba(255,1,136,0)') ctx.fillStyle = radialgradient ;
图案样式Patterns
createPattern(image,type);
type:
repeat
repeat-x
repeat-y
no-repeat实例
var img = new Image(); img.src = 'images/wallpaper.png'; img.onload = function(){ // 创建图案 var ptrn = ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150); }
阴影Shadows
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
shadowColor = color
shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。
文字阴影的例子
这个例子绘制了带阴影效果的文字。
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; ctx.fillText("Sample String", 5, 30);}
Canvas填充规则
nonzero : 默认
evenodd : even-odd rule:奇偶规则。该算法在基于矢量的图形软件中实施。它决定如何与多于一个的闭合轮廓的图形的形状将被填充,奇数:内部填充
偶数:外部填充
- Canvas:样式及颜色
- Canvas教程(4):运用样式与颜色
- Android开发颜色样式及代码
- android 改变光标的颜色及样式
- canvas画柱状图及createLinearGradient颜色渐变的效果
- 深入了解Canvas标签(4)——运用样式与颜色
- 深入了解canvas标签(4)——运用样式与颜色
- 读HTML5应用与开发实践【三】【canvas圆、贝赛尔曲线、样式与颜色】
- 更改Message Box (Ext.Msg) 的字体颜色及样式
- android 颜色收集及部分gridview样式设置
- Android中颜色选择器及styles样式(六)
- 通过字符串、颜色和尺寸资源改变文字及样式
- 【项目中】改变checkbox边框样式及颜色
- 242种颜色样式、中英文名称及十六进制的值
- QWidget设置边框(样式,宽度及颜色)
- Android Studio之 更改背景颜色及主题样式
- python库matplotlib中线条的颜色及样式
- Canvas填充样式fillStyle
- clojure
- MAC 下画 UML 工具
- extjs 页面显示上传文件名,并点击下载
- 【C语言】编译链接的整个过程和详细的每个过程
- DRM
- Canvas:样式及颜色
- FreeRTOS系列第2篇---FreeRTOS入门指南
- CodeForces 257C. View Angle
- H5调用本地的照相机,摄像机等设备
- 第一次参加区域赛之旅——2016 ACM/ICPC 大连站 感想
- React Native 0.35植入Android 原生应用。
- FreeRTOS系列第3篇---FreeRTOS移植指南
- 系统内核的洪荒之力:挪动鼠标
- 玩转 Java Nio 第一章 buffer相关