html5 strokestyle,HTML canvas strokeStyle 属性 - JavaScript 参考手册

实例

绘制一个矩形。请用红色的笔触颜色：YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.strokeStyle="#FF0000";

ctx.strokeRect(20,20,150,100);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 strokeStyle 属性。

注意：Internet Explorer 8 及之前的版本不支持元素。

定义和用法

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。默认值：#000000

JavaScript 语法：context.strokeStyle=color|gradient|pattern;

属性值值描述

color指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。

gradient用于填充绘图的渐变对象(线性或放射性)。

pattern用于创建 pattern 笔触的 pattern 对象。

更多实例

实例

绘制一个矩形。使用渐变笔触：YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// Fill with gradient

ctx.strokeStyle=gradient;

ctx.lineWidth=5;

ctx.strokeRect(20,20,150,100);

尝试一下 »

实例

用一个渐变笔触来写文本 "Big smile!"：YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Verdana";

// Create gradient

var gradient=ctx.createLinearGradient(0,0,c.width,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// Fill with gradient

ctx.strokeStyle=gradient;

ctx.strokeText("Big smile!",10,50);

尝试一下 »

html5 strokestyle,HTML canvas strokeStyle 属性 - JavaScript 参考手册 - 自强学堂相关推荐

用html5定义表格的背景颜色,HTML table 标签 - HTML 颜色参考手册 - 自强学堂
HTML 实例一个简单的 HTML 表格,包含两列两行: Month Savings January $100 尝试一下 » (更多实例见页面底部) 浏览器支持所有主流浏览器都支持标签定义及使用 ...
html按钮颜色属性值,HTML button formmethod 属性 - HTML 颜色参考手册 - 自强学堂
HTML button formmethod 属性实例带有两个提交按钮的表单,第一个提交按钮使用 method="get" 提交表单数据,第二个提交按钮使用 method=&q ...
html修改th颜色,HTML th 标签 - HTML 颜色参考手册 - 自强学堂
HTML 标签实例一个简单的 HTML 表格,带有两个表头单元格和两个数据单元格: Month Savings January $100 尝试一下 » (更多实例见页面底部) 浏览器支持所有主流 ...
end php 函数,PHP end() 函数 - PHP 参考手册 - 自强学堂
实例 1 所有相关方法的演示: $people = array("Peter", "Joe", "Glenn", "Clevela ...
html文档中strokestyle,HTML5简明教程-1.1.2.HTML5Canvas参考手册之笔触strokeStyle
今天介绍canvas的另一个重要属性strokeStyle,strokeStyle属性定义了我们在canvas画布上进行图形绘制时的"笔触",简单点说,就是定义了我们的画笔样式.另 ...
菜鸟教程之html5学习，Canvas画布、渐变，数学公式、符号的书写
html5元素及功能: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者,等 HTML5新元素 <canvas> ...
html js参考手册,JavaScript 和 HTML DOM 参考手册
手册简介本手册收录了所有内置的JavaScript对象.浏览器对象和HTML DOM对象,参考手册描述了每个JavaScript对象和Browser 对象的属性和方法,并提供了在线实例.是目前最完善 ...
jQuery 参考手册
目录 jQuery 选择器 jQuery 事件方法 jQuery 效果函数 jQuery 文档操作方法 jQuery 属性操作方法 jQuery CSS 操作函数 jQuery Ajax 操作函数 j ...
HTML5 canvas 参考手册
HTML5 <canvas> 参考手册描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元 ...

html5 strokestyle,HTML canvas strokeStyle 属性 - JavaScript 参考手册 - 自强学堂

html5 strokestyle,HTML canvas strokeStyle 属性 - JavaScript 参考手册 - 自强学堂相关推荐

最新文章

热门文章