美文网首页
如何通过js做一个简单的画板

如何通过js做一个简单的画板

作者: 本来无一物_f1f2 | 来源:发表于2018-12-20 19:00 被阅读0次

    onmusedown
    鼠标按下
    onmusemove
    鼠标移动
    onmuseup
    鼠标松开
    appendChild
    返回值
    createElement
    生成元素
    getElementById
    通过id获取元素

    var div = document.getElementById('canvas')
    var painting = false
    div.onmousedown =function(a){
      painting = true
      var x = a.clientX
      var y = a.clientY
      var divA = document.createElement('div')
      divA.style = "width:6px; height:6px;" +
        "background:black; border-radius:3px;" +
        "position:absolute;left: "+(x-3)+"px;" +
        "top: "+(y-3) +"px;"
      div.appendChild(divA)
    }
    
    
    div.onmousemove =function(a){
      if(painting){  
         var x = a.clientX
         var y = a.clientY
         var divA = document.createElement('div')
         divA.style = "width:6px; height:6px;" +
            "background:black; border-radius:3px;" +
            "position:absolute;left: "+(x-3)+"px;" +
            "top: "+(y-3) +"px;"
      div.appendChild(divA)}else{
        
      }
    
    }
    
    div.onmouseup =function(z){
      painting = false
    }
    

    相关文章

      网友评论

          本文标题:如何通过js做一个简单的画板

          本文链接:https://www.haomeiwen.com/subject/bfjukqtx.html