<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="tutorial" width="300" height="300"> 你的瀏覽器不支持canvas,請升級你的瀏覽器</canvas>
<button onClick="clearCanvas(this)">清除一條線</button>
<script>
/*
知識點：
fillRect(x, y, width, height)
繪制一個填充的矩形
strokeRect(x, y, width, height)
繪制一個矩形的邊框
clearRect(x, y, widh, height)
清除指定的矩形區域，然后這塊區域會變的完全透明。
說明：
這3個方法具有相同的參數。
x, y：指的是矩形的左上角的坐標。(相對於canvas的坐標原點)
width, height：指的是繪制的矩形的寬和高 */
var canvas = document.getElementById('tutorial');
console.log(canvas.getContext)
if (canvas.getContext){ // 方式2 if(!canvas.getContext) return;
var ctx = canvas.getContext('2d');
// drawing code here
ctx.fillStyle = "rgb(200,0,0)"; // 設置填充色---//繪制矩形,填充的默認顏色為黑色
//繪制矩形
ctx.fillRect (10, 10, 55, 50);
// 繪制矩形邊框
ctx.strokeStyle = "#68217A"; // 設置顏色
ctx.strokeRect (65,60,50,60); // 繪制一個矩形的邊框
// clearRect(x, y, widh, height)
// 清除指定的矩形區域，然后這塊區域會變的完全透明
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
} else {
// canvas-unsupported code here
}
// 清除一條線
function clearCanvas(data){
console.log(data)
// 清除指定的矩形區域，然后這塊區域會變的完全透明
ctx.clearRect (65,55,55,10);
}
</script>
<style>
canvas {
border: 1px solid black;
}
</style>
</body>
</html>
