当前位置 : 主页 > 网络编程 > JavaScript >

canvas实现画画(getImagedata())

来源:互联网 收集:自由互联 发布时间:2021-06-28
通过 getImageData() 复制画布上的像素数据,然后通过 putImageData() 将图像数据放回画布。 //鼠标按下canvas.onmousedown=function(event){ ctx.moveTo(event.pageX-canvas.offsetLeft,event.pageY-canvas.offsetTop); ctx.
通过 getImageData() 复制画布上的像素数据,然后通过 putImageData() 将图像数据放回画布。
//鼠标按下
canvas.onmousedown=function(event){
    ctx.moveTo(event.pageX-canvas.offsetLeft,event.pageY-canvas.offsetTop);
    ctx.lineTo(event.pageX-canvas.offsetLeft+1,event.pageY-canvas.offsetTop+1);
    ctx.stroke();
    //获取像素,存到数组
    var imageData=ctx.getImageData(0,0,w,w);
    arr.push(imageData);
    //鼠标移动
    canvas.onmousemove=function(event){
        ctx.lineTo(event.pageX-canvas.offsetLeft,event.pageY-canvas.offsetTop);
        ctx.stroke();
        //获取像素,存到数组
        var imageData=ctx.getImageData(0,0,w,w);
        arr.push(imageData);
    }
    //鼠标释放
    canvas.onmouseup=function(){
        canvas.onmousemove=null;
        canvas.onmousestart=null;
    }
}	   

//点击“点击回放”按钮
btn.onclick=function(){
    ctx.clearRect(0,0,w,w);
    var i=0;
    var timer;
    clearInterval(timer);
    //利用定时器回放像素
    timer=setInterval(function(){
        if(arr.length==0){
            clearInterval(timer);
        }else{
            ctx.putImageData(arr[i],0,0);
            i++;
            if(i>=arr.length){
                clearInterval(timer);
            }
        }
    },10)
}
网友评论