美文网首页
如何通过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