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

2018-12-20  本文已影响0人  本来无一物_f1f2

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
}
上一篇 下一篇

猜你喜欢

热点阅读