VML实例-铅笔画

最新推荐文章于 2022-04-11 18:01:39 发布

想飞的孤独少年

最新推荐文章于 2022-04-11 18:01:39 发布

阅读量241

点赞数 1

分类专栏：其他文章标签： VML 绘图鼠标事件网页交互图形绘制

本文链接：https://blog.csdn.net/qq_33735635/article/details/116062569

版权

其他专栏收录该内容

21 篇文章 3 订阅

订阅专栏

VML铅笔画

<HTML xmlns:v>
<HEAD>
<META http-equiv='Content-Type' content='text/html;charset=gb2312'>
<Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'>
<TITLE>VML最简实现铅笔绘图功能</TITLE>
<STYLE>
v\:*{behavior:url(#default#VML);}   /*声明V为VML变量*/
</STYLE>
</HEAD>
<body bgcolor=black>
<div id=div1 style="background-color:white;width:400;height:400"></div><br><input type=button value="清空" onclick="div1.innerHTML=''">
<script>  //
var xx=0,yy=0,oldvalue="",poly1,zz=1
function div1.onmousedown(){   //鼠标按下
if(event.button==1){
div1.setCapture()       //画笔绘画开始，锁定鼠标
color1="red"  //定义画笔基本颜色
size1=1  //定义画笔基本粗度
xx=event.x;yy=event.y;zz+=1  //定义基本起始坐标,zz是第三维,默认递增
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'/>"))
oldvalue=poly1.path.value.replace("e","")
}}
function div1.onmousemove(){  //鼠标移动
if(event.button==1){
if(event.srcElement.tagName=="BODY"){div1.releaseCapture();return false}
oldvalue+=","+(event.x-xx)+","+(event.y-yy);poly1.path.value=oldvalue
poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e")
}}
function div1.onmouseup(){  //鼠标弹起
div1.releaseCapture();
}
</script>