canvas fill()

admin發表於2019-02-25
Canvas

此方法可以對路徑進行填充操作，填充需要遵循一定的規則：

（1）.填充內容通過fillStyle屬性規定，具體參閱canvas fillStyle一章節。

（2）.填充可以採用採取非零環繞或者奇偶環繞規則，具體參閱非零繞組規則與奇偶規則一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
ctx.fill([fillRule])

引數解析：

（1）.fillRule：可選，規定填充所遵循的規則，預設是非零環繞規則。

         可以允許的值是"nonzero"和"evenodd"。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
    border:1px solid #d3d3d3;
    width:300px;
    height:150px;
}
</style> 
<script>
window.onload=function(){
  let c=document.getElementById("myCanvas");
  let ctx=c.getContext("2d");
  ctx.rect(20,20,150,100);
  ctx.fillStyle="red";
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>

上述程式碼可以將矩形填充成紅色，程式碼非常簡單不多介紹。

相關文章