H5 canvas+原生js实现轮播图

自学canvas的时候练手写的小demo，话不多说，上代码。

html部分

<div id="container">
        <div id="leftBtn"></div>
        <canvas id="myCanvas" width="515" height="300"></canvas>
        <div id="rightBtn"></div>
    </div>
    <div class="myImgs">
        <img src="./imgs/img1.jpeg" id="img1" width="125" height="150" onclick="imgClick(this.id)">
        <img src="./imgs/img2.jpeg" id="img2" width="125" height="150" onclick="imgClick(this.id)">
        <img src="./imgs/img3.jpeg" id="img3" width="125" height="150" onclick="imgClick(this.id)">
        <img src="./imgs/img4.jpg" id="img4" width="125" height="150" onclick="imgClick(this.id)">
    </div>

js部分

//canvas+原生js实现简单轮播图
let myCanvas = document.getElementById('myCanvas')
let img1 = document.getElementById('img1')
let img2 = document.getElementById('img2')
let img3 = document.getElementById('img3')
let img4 = document.getElementById('img4')
//获取左右按钮
let leftBtn=document.getElementById('leftBtn')
let rightBtn=document.getElementById('rightBtn')
//“2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
var cvs = myCanvas.getContext("2d");