HTML 参考手册

HTML 标签大全

HTML canvas fill() 方法

fill() 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

在线示例

绘制 100*100 像素的正方形，然后用红色来给它填色：

示例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　fill()方法使用-基础教程(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.rect(20,20,100,100);
ctx.fillStyle="red";
ctx.fill();
</script>　
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome and Safari support fill() method.

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

Definition and Usage

The fill() method fills the current graphic (path). The default color is black.

Hint:Please use fillStyle property to fill with another color/gradient.

Note:If the path is not closed, the fill() method will add a line from the end point of the path to the starting point to close the path (just like closePath() same），then fill the path.

JavaScript Syntax:	context.fill();

HTML canvas Reference Manual

HTML: <template> Tag