Canvas清除矩形

清除矩形區域context.clearRect(x,y,width,height)

x:清除矩形起點橫座標

y:清除矩形起點縱座標

# width:清除矩形長

height:清除矩形高度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>huatu</title>
    <style>
        body{
            background: #dddddd;
        }
        #canvas{
            margin: 10px;
            background: #ffffff;
            border: thin inset #aaaaaa;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400">
        Canvas not Supported
    </canvas>
    <script>
        var canvas=document.getElementById('canvas'),
            context=canvas.getContext('2d');
        context.lineJoin='round';
        context.lineWidth=30;
        context.font='24px Helvetica';
        context.fillText('Click anywhere to erase',175,40);
        context.strokeRect(75,100,200,200);
        context.fillRect(325,100,200,200);
        context.canvas.onmousedown = function(e) {
            context.clearRect(0,0,600,400);
        }
    </script>
</body>
</html>

繼續學習

新建檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>huatu</title>
 <style>
 body{
 background: #dddddd;
 }
 #canvas{
 margin: 10px;
 background: #ffffff;
 border: thin inset #aaaaaa;
 }
 </style>
</head>
<body>
 <canvas id="canvas" width="600" height="400">
 Canvas not Supported
 </canvas>
 <script>
 var canvas=document.getElementById('canvas'),
 context=canvas.getContext('2d');
 context.lineJoin='round';
 context.lineWidth=30;
 context.font='24px Helvetica';
 context.fillText('Click anywhere to erase',175,40);
 context.strokeRect(75,100,200,200);
 context.fillRect(325,100,200,200);
 context.canvas.onmousedown = function(e) {
 context.clearRect(0,0,600,400);
 }
 </script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX