html文档中strokestyle,HTML canvas strokeStyle属性

HTML canvas strokeStyle属性

实例

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

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); 亲自测试一下

属性

描述

Canvas fillStyle

Canvas shadowColor

Canvas shadowBlur

Canvas shadowOffsetX

Canvas shadowOffsetY

Canvas createLinearGradient()

Canvas createPattern()

Canvas createRadialGradient()

Canvas addColorStop()

Canvas lineCap

Canvas lineJoin

Canvas lineWidth

Canvas miterLimit

Canvas rect()

Canvas fillRect()

Canvas strokeRect()

Canvas clearRect()

Canvas fill()

Canvas stroke()

Canvas beginPath()

Canvas moveTo()

Canvas closePath()

Canvas lineTo()

Canvas clip()

Canvas quadraticCurveTo()

Canvas bezierCurveTo()

Canvas arc()

Canvas arcTo()

Canvas isPointInPath()

Canvas scale()

Canvas rotate()

Canvas translate()

Canvas transform()

Canvas setTransform()

Canvas font

Canvas textAlign

Canvas textBaseline

Canvas fillText()

Canvas strokeText()

Canvas measureText()

Canvas drawImage()

Canvas width

Canvas height

Canvas data

Canvas createImageData()

Canvas getImageData()

Canvas putImageData()

Canvas globalAlpha

Canvas globalCompositeOperation

本文网址：http://www.santii.com/javascript/prop-canvas-strokestyle.html