Canvas繪製矩形（四）
阿新 • • 發佈：2018-12-12
函式定義：
context.fillRect(x,y,width,height)
引數x,y表示矩形的左上角位置，引數width，height表示矩形的寬和高，並填充矩形；
context.strokeRect(x,y,width,height)
引數x,y表示矩形的左上角位置，引數width，height表示矩形的寬和高，並勾勒矩形；程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); context.fillRect(40,40,100,100); context.strokeRect(150,150,100,100); })</script> </head> <body> <canvas id="myCanvas" width="500" height="500" style="background-color: #112233"> <!-- no no no no --> </canvas> </body> </html>
如下圖：
若想改變顏色，只需在繪畫前使用以下語句：
context.fillStyle = "#124278";
填充矩形顏色
context.strokeStyle = "#cca123";
矩形框的顏色程式碼如下：
context.fillStyle = "#124278";
context.fillRect(40,40,100,100);
context.strokeStyle = "#cca123";
context.strokeRect(150,150,100,100);可以看到效果圖如下：
