Change color of canvas element

后端 未结 3 727
遥遥无期
遥遥无期 2021-01-29 04:26

I am trying to change the color of line drawn on canvas dynamically...

ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = \"Grey\"

It coul

3条回答
  •  礼貌的吻别
    2021-01-29 05:28

    var canvas = document.getElementById('canvas');
    
            var ctx=canvas.getContext('2d');
    var line1={x:10,y:10, l:40, h:1}
    var down=false;
    var mouse={x:0,y:0}
    canvas.onmousemove=function(e){ mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};
    this.onmousedown=function(){down=true};
    this.onmouseup=function(){down=false} ; 
    }
    
    setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height)
    ctx.beginPath()
    ctx.moveTo(line1.x,line1.y)
    ctx.lineTo(line1.x +line1.l,line1.y)
    ctx.lineTo(line1.x +line1.l,line1.y+line1.h)
    ctx.lineTo(line1.x,line1.y+line1.h)
    
    
     ctx.isPointInPath(mouse.x,mouse.y)? (ctx.fillStyle ="red",line1.x=down?mouse.x:line1.x,line1.y=down?mouse.y:line1.y):(ctx.fillStyle ="blue")
    ctx.fill()
    },100)
    

提交回复
热议问题