效果
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一个坏掉的电视</title>
<style>
body{
background: pink;
}
#test{
background: rgba(255,255,255,0);
}
</style>
</head>
<body>
<canvas id="test" width="500" height="500"></canvas>
<script>
let ctx;
function init() {
var canvas = document.querySelector("#test");
if(!canvas.getContext) return;
ctx = canvas.getContext("2d");
draw();
movie();
}
init();
function draw() {
tv();
}
function movie(){
ctx.clearRect(53,53,54,44);
ctx.fillStyle="#fff";
ctx.fillRect(53,53,54,44*Math.random());
requestAnimationFrame(movie);
}
function tv() {
ctx.lineJoin="round";
ctx.lineWidth=6;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(110,50);
ctx.lineTo(110,100);
ctx.lineTo(50,100);
ctx.lineTo(50,50);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(80,100);
ctx.lineTo(80,110);
ctx.stroke();
ctx.lineCap ="round";
ctx.beginPath();
ctx.moveTo(60,110);
ctx.lineTo(100,110);
ctx.stroke();
}
</script>
</div>
</body>
</html>
