console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
        // 创建一个canvas画布标签
		let canvas=document.createElement('canvas');
        //设置画布的宽
        canvas.width=window.innerWidth
        // 设置画布的高
        canvas.height=window.innerHeight
        // 将画布插入到body元素中
        document.body.appendChild(canvas)
        // 设置画布类型为2d
        let context=canvas.getContext('2d')
        // 画布添加按下鼠标时记录坐标
        canvas.addEventListener('mousedown',function(e){
            // 停止滑动则放开开关
            this.isMousedown=true;
            // 记录最后的移动位置
            context.moveTo(e.pageX,e.pageY)
        })
        // 为画布添加移动事件
        canvas.addEventListener('mousemove',function(e){
            if(this.isMousedown){
                // 将坐标添加到画布中
                context.lineTo(e.pageX,e.pageY)
                context.stroke();
            }
        })
        // 为画布添加松开鼠标事件
        canvas.addEventListener('mouseup',function(e){
            this.isMousedown=false
        })
        // 双击进行下载操作
        canvas.addEventListener('dblclick',function(e){
            // 创建a标签
            let link=document.createElement('a')
            // 将其canvas转为图片格式地址
            link.href=canvas.toDataURL("image/png")
            // 为图片地址编辑图片名称
            link.download="draw.png"
            link.click()
        })
	</script>
</body>

</html>