html5 canvasfillStyle属性和strokeStyle属性

（《HTML5 Canvas核心技术图形／动画与游戏开发》学习［2］）

fillStyle: 设置填充图形的颜色，渐变和模式。

strokeStyle: 设置用于笔触（描边）的颜色，渐变和模式。

用法一：设置颜色。属性值可以是任意有效的css颜色字串（RGB, RGBA, HSLA, 指定颜色名称）。

示例：#ffffff, rgba(100,100,100,0.8), rgb(255,255,0), hsla(40,82%,33%,0.6), burlywood, cadetblue等。。。。

用法二：设置渐变色和图案。

线性渐变示例：

var gradient=context.createLinearGradient(0,0,canvas.width,0);gradient.addColorStop(0,      'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5,  'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1,        'yellow');context.fillStyle=gradient;
context.rect(0,0,canvas.width,canvas.height);
context.fill();

其中，createLinearGradient()的四个参数按顺序为：渐变开始点的x坐标，渐变开始点的y坐标，渐变结束点的x坐标，渐变结束点的y坐标。

放射渐变示例：

var gradient=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);

和线性渐变只有gradient变量不同，createRadialGradient()参数为：渐变的开始圆的x坐标，渐变的开始圆的y坐标，开始圆的半径，渐变的结束圆的x坐标，渐变的结束圆的y坐标，结束圆的半径。

图案示例：

// JavaScript Documentvar canvas=document.getElementById('canvas'),context=canvas.getContext('2d'),repeatRadio=document.getElementById('repeatRadio'),repeatXRadio=document.getElementById('repeatXRadio'),repeatYRadio=document.getElementById('repeatYRadio'),noRepeatRadio=document.getElementById('noRepeatRadio'),image=new Image();function fillCanvasWithPattern(repeatString){var pattern=context.createPattern(image,repeatString);context.clearRect(0,0,canvas.width,canvas.height);context.fillStyle=pattern;context.fillRect(0,0,canvas.width,canvas.height);context.fill();
}repeatRadio.οnclick=function(e){fillCanvasWithPattern('repeat');
};repeatXRadio.οnclick=function(e){fillCanvasWithPattern('repeat-x');
};repeatYRadio.οnclick=function(e){fillCanvasWithPattern('repeat-y');
};noRepeatRadio.οnclick=function(e){fillCanvasWithPattern('no-repeat');
};image.src='babe.png';
image.οnlοad=function(e){fillCanvasWithPattern('repeat');
};

.createPattern()语法：context.createPattern(要使用的图片，画布或者视频等元素，“重复方式”)

html5 canvasfillStyle属性和strokeStyle属性相关推荐

html5 strokestyle,HTML canvas strokeStyle 属性 - JavaScript 参考手册 - 自强学堂
实例绘制一个矩形.请用红色的笔触颜色:YourbrowserdoesnotsupporttheHTML5canvastag. JavaScript: var c=document.getElemen ...
html表单的常用属性有哪些,整理HTML5中表单的常用属性及新属性
这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下 HTML5 新的表单属性 HTML5 ...
HTML5实例教程:OL标签的start属性和reversed属性
在HTML5中的OL被改良了,为它增加了两个新属性. start属性: start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&q ...
html5中有哪些新属性,整理HTML5中表单的常用属性及新属性
HTML5 新的表单属性HTML5 的和标签添加了几个新属性.新属性: autocomplete novalidate 新属性: autocomplete autofocus form forma ...
HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的 Web 应用程序,HTML5 正引领互联网新革命.为了方便大家更好的学习 HTML5,今天这 ...
html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...
HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解
html5中可拖动dragable属性及其他成员的讲解发布时间:2020-04-22 11:08:02 来源:亿速云阅读:350 作者:小新这篇文章主要为大家详细介绍了html5中可拖动drag ...
html5的vidoe标签,HTML5的Video标签的属性,方法和事件
大多数的视频通过插件(例如flash)来播放,然而并非所有的浏览器都支持此类插件.HTML5规定了一种通过video来包含视频的标准方法.但是IE8及以下版本不支持video. HTML5的video ...
css 修改文字基准线_HTML4/HTML5 用CSS或style属性修改 hr 实线虚线点线双实线样式 ... ......
HTML4/HTML5 用CSS或style属性修改实线虚线点线双实线样式 HTML 是 Hyper Text Markup Language 的英文缩写,中文称为超文本标记语言.HTML 是 ...

html5 canvasfillStyle属性和strokeStyle属性

html5 canvasfillStyle属性和strokeStyle属性相关推荐

最新文章

热门文章