[html] 第1910天 使用canvas画一个小汽车

[haizhilin2013]

第1910天 使用canvas画一个小汽车

3+1官网

我也要出题

[tuna888]

<script> window.onload = () => { const canvas = document.querySelector("#test"); if (canvas.getContext) { const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,100) ctx.lineTo(185,100);

// 车头
ctx.quadraticCurveTo(180, 60, 135, 60);

// 车顶
ctx.arc(95,60,40,0,Math.PI,true);

// 车尾
ctx.quadraticCurveTo(30, 75, 20, 100)

ctx.fillStyle="pink";
ctx.fill();

// 窗户
ctx.beginPath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.fillRect(75,45,40,20)

// 前轮
ctx.beginPath();
ctx.moveTo(40,100);
ctx.arc(55,100,15,0,Math.PI*2,true);
ctx.fillStyle="#000";
ctx.fill();

// 后轮
ctx.beginPath();
ctx.moveTo(130,100)
ctx.arc(145,100,15,0,Math.PI*2,true);
ctx.fillStyle="#000";
ctx.fill();

// 车灯
ctx.beginPath();
ctx.arc(165,80,5,0,Math.PI*2,true);
ctx.fillStyle="yellow";
ctx.fill();

}
}
</script>