HTML 参考手册

HTML 标签大全

HTML: <template> Tag

HTML canvas stroke() 方法

HTML canvas的stroke()方法用于绘制路径。使用moveTo()和lineTo()方法绘制此路径。

HTML canvas Reference Manual

在线示例

绘制一条路径，形状是蓝色的字母 L再画一条竖线：

JavaScript：

示例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　stroke()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
您的浏览器不支持　HTML5　canvas　标签。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="blue";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,　200);
ctx.lineTo(100,　100);
ctx.strokeStyle = "blue";
ctx.stroke();
</script>　
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support stroke() Methods.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The stroke() method actually draws the path defined by the moveTo() and lineTo() methods. The default color is black.

Hint:Please use strokeStyle Attribute to draw another color/Gradient.

JavaScript Syntax:	context.stroke();

HTML canvas Reference Manual

HTML: <template> Tag