<!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>
