前端如何在页面上根据坐标轴画点

JavaScript06

前端如何在页面上根据坐标轴画点,第1张

具体代码如下:在指定位置画多个点canvas{undefinedborder: 1px dashed gray}js代码:var cvs = document.getElementById('cvs')var ctx = cvs.getContext('2d')// 坐标轴距离画布上右下左的边距var padding = {undefinedtop:20,right:20,bottom:20,left:20}// 坐标轴中箭头的宽和高var arrow = {undefinedwidth:12,height:20}// 求坐标轴上顶点的坐标var vertexTop = {undefinedx:padding.left,y:padding.top}// 求坐标轴原点的坐标var origin = {undefinedx:padding.left,y:cvs.height - padding.bottom}// 求坐标轴右顶点的坐标var vertexRight = {undefinedx:cvs.width - padding.left,y:cvs.height - padding.bottom}

首先点、线、面数据分别属于不同图层，也就是说你如果想要把这些数据作为feature数据保存，必须要存在三个层里，除非你是要存成图像在graphicLayer里面，其次你如果想要对发布的图层进行编辑，你需要有编辑的权限，有了权限后就可以对相应的图层进行数据编辑了，也就是可以添加你的点啊什么的了。

这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹

<body>

<center>

<canvas id="cavsElem" width="800" height="560" style="border: 1px solid black ">你的浏览器不支持此涂鸦板</canvas>

画笔颜色：<input type="color" id="context.color" />

画笔大小:<input type="number"id="context.size" max="10" value="1" />

</center>

<script>

(function(){

var canvas=document.getElementById('cavsElem')//获得画布

var context=canvas.getContext('2d')//准备画笔

var a=document.getElementById('context.color')

var b=document.getElementById('context.size')

    canvas.onmousedown=function(e){     //鼠标触发onmousedown事件时,获取起始坐标

     var x=e.clientX-canvas.getBoundingClientRect().left

     var y=e.clientY-canvas.getBoundingClientRect().top

     context.beginPath()

     context.moveTo(x,y)    

    canvas.onmousemove=function(event){   //触发鼠标移动事件时，获取绘制线条的坐标

     var x=event.clientX-canvas.getBoundingClientRect().left

     var y=event.clientY-canvas.getBoundingClientRect().top

     context.lineTo(x,y)//绘制线条

     context.strokeStyle=a.value

context.lineWidth=b.value

     context.stroke()

    }

    canvas.onmouseup=function(event){    //鼠标被松开时，返回null

     canvas.onmousemove=null

    }

  }

 }())

</script>

</body>