1. <HTML xmlns:v>
  2. <HEAD>
  3. <META http-equiv='Content-Type' content='text/html;charset=gb2312'>
  4. <Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'>
  5. <TITLE>VML最简实现铅笔绘图功能</TITLE>
  6. <STYLE>
  7. v/:*{behavior:url(#default#VML);}   /*声明V为VML变量*/
  8. </STYLE>
  9. </HEAD>
  10. <body bgcolor=black>
  11. <div id=div1 style="background-color:white;width:400;height:400"></div><br><input type=button value="清空" onclick="div1.innerHTML=''">
  13. <script>  //作者:风云舞
  14. var xx=0,yy=0,oldvalue="",poly1,zz=1
  15. function div1.onmousedown(){   //鼠标按下
  16. if(event.button==1){
  17. div1.setCapture()       //画笔绘画开始，锁定鼠标
  18. color1="red"  //定义画笔基本颜色
  19. size1=1  //定义画笔基本粗度
  20. xx=event.x;yy=event.y;zz+=1  //定义基本起始坐标,zz是第三维,默认递增
  21. poly1=div1.appendChild(document.createElement("<v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' strokecolor='"+color1+"' strokeweight='"+size1+"' coordsize='100,100'/>"))
  22. oldvalue=poly1.path.value.replace("e","")
  23. }}
  25. function div1.onmousemove(){  //鼠标移动
  26. if(event.button==1){
  27. if(event.srcElement.tagName=="BODY"){div1.releaseCapture();return false}
  28. oldvalue+=","+(event.x-xx)+","+(event.y-yy);poly1.path.value=oldvalue
  29. poly1poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e")
  30. }}
  32. function div1.onmouseup(){  //鼠标弹起
  33. div1.releaseCapture();
  34. }
  35. </script>