1. 程式人生 > >Canvas繪製矩形(四)

Canvas繪製矩形(四)

函式定義:

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);

可以看到效果圖如下: