canvas画板（鼠标和触摸）

发布时间：2023-02-16 文章分类：编程知识投稿人：王小丽字号：默认 | 大 | 超大打印
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canves</title>
    <style>
        #canvas  {
            cursor:url(../images/pen.png),crosshair;
        }
        #canvasdiv{
            border: 1px solid #bcbcbc;
        }
    </style>
</head>
<body>
<div id="canvasdiv">
    <canvas id="canvas"></canvas>
</div>
<button type="button" class="layui-btn layui-btn-normal" id="clear" style="display: none" onclick="clear_all()" onsubmit="return false;"></button>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var base64data='';
    canvas.width="320"
    canvas.height="240"
    //页面不出现滚动滑动
    $("html,body").css("overflow","hidden").css("height","100%");
    document.body.addEventListener('touchmove', self.welcomeShowedListener, false);
    //画一个黑色矩形
    ctx.fillStyle = "rgba(225,225,225,0)";//绘制填充颜色 透明色
    ctx.fillRect(0, 0,320,240);//绘制一个被填充的矩形
    //按下标记
    var onoff = false;
    //定义起始位置
    var oldx = 0;
    var oldy = 0;
    //设置画笔颜色默认为黑色
    var linecolor = "black";
    //画笔宽度默认为4
    var linw = 4;
    //判断是触摸还是鼠标
    if (document.body.ontouchstart !== undefined) {
        //执行touch代码
        // 手指按下
        canvas.ontouchstart = e => {
            painting = true
            const event = e.touches[0]
            ctx.lineCap = 'round'
            ctx.lineJoin = 'round'
            const x = event.pageX
            const y = event.pageY
            ctx.beginPath()
            ctx.moveTo(x, y)
            ctx.lineWidth = linw
            ctx.strokeStyle = linecolor
        }
        // 手指移动
        canvas.ontouchmove = e => {
            if (!painting) {
                return
            }
            const event = e.touches[0]
            const x = event.pageX
            const y = event.pageY
            ctx.lineTo(x, y)
            ctx.stroke()
        }
        // 手指抬起
        canvas.ontouchend = () => {
            if (!painting) {
                return false
            }
            painting = false
            ctx.closePath()
        }
        // 手指离开区域
        ontouchcancel = () => {
            if (!painting) {
                return false
            }
            painting = false
            ctx.closePath()
        }
    } else {
        //鼠标移动事件，事件绑定
        // 执行mouse代码
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("mousedown", down);
        canvas.addEventListener("mouseup", up);
    }
    // 下笔时按下标记打开，给oldx、oldy赋值
    function down(event) {
        onoff = true;
        oldx = event.pageX;
        oldy = event.pageY;
    }
    //检测鼠标离开后，按下标记关闭
    function up() {
        onoff = false;
    }
    //画图，按下标记打开
    function draw(event) {
        if (onoff == true) {
            var newx = event.pageX ;
            var newy = event.pageY;
            // 起始一条路径，或重置当前路径。
            ctx.beginPath();
            // 把路径移动到画布中的指定点，不创建线条。
            ctx.moveTo(oldx, oldy);
            // 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
            ctx.lineTo(newx, newy);
            // 设置或返回用于笔触的颜色、渐变或模式。
            ctx.strokeStyle = linecolor;
            // 设置或返回当前的线条宽度。
            ctx.lineWidth = linw;
            // 设置或返回线条的结束端点样式。
            ctx.lineCap = "round";
            // 绘制已定义的路径。
            ctx.stroke();
            oldx = newx;
            oldy = newy;
        }
    }
    // 生成图片
    function generate_picture() {
            const dataImg = new Image();
            // canvas生成图片
            dataImg.src = canvas.toDataURL('image/png');
    };
    //清理画布
    function clear_all() {
            ctx.fillStyle = 'rgba(225,225,225,0)';
            ctx.fillRect(0, 0, 320,240);
    };
    // 下载图片
    function download_picture() {
        const dataImg = new Image();
        dataImg.src = canvas.toDataURL('image/png');
        document.querySelector('#image').appendChild(dataImg)
        const alink = document.createElement("a");
        alink.href = dataImg.src;
        alink.download = "testImg.jpg";
        alink.click();
    }
</script>
</html>
标签 canvas, 画板, 鼠标