用Canvas实现坐标线画图拖拽移动_canvas 图片移动画的线也随图片移动而移动-CSDN博客

本文链接：https://blog.csdn.net/Polarisone/article/details/100324817

这篇博客介绍如何利用Canvas实现拖拽移动功能，包括点击生成红色圆形，拖拽时显示x,y轴线跟随移动，并实时显示移动坐标值。主要涉及两个JavaScript文件：mikuCanvasAxes.js和mikuCanvasPaintAppMain.js。" 50855190,1153584,iBatis配置详解与最佳实践,"['数据库', '持久层框架', 'iBatis', 'XML配置', 'Java开发']

摘要由CSDN通过智能技术生成

主要分三步

1. html页面

2. mikuCanvasAxes.js

3. mikuCanvasPaintAppMain.js

在html页面中直接引入以上两个js即可,就可实现如下功能
1. 点击添加块出现红色的圆形
2. 当鼠标拖拽红色的圆形便会出现x,y轴线随着圆的移动随着他移动
3. 移动图的同时最上方会出现你所移动的坐标数
在这里插入图片描述

1.html页面


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Document</title>
        <style type="text/css">
            canvas{
   
                background-color: rgb(247, 247, 247);
                margin-top: 10px;
                border: thin solid blue;
            }
        </style>
    </head>
    <body>
         <p id="message"></p>
        <div class="controls">
            网格线<input  id="gridCheckBox" type="checkbox" checked="checked" >
            坐标轴<input  id="axesCheckBox" type="checkbox" checked="checked" >
            <!-- 辅助线<input  id="guideWiresCheckBox" type="checkbox" checked="checked" > -->
            <input type="button" value="清除画布" id="eraseAllButton">
            <input type="button" value="添加块" id="addBlock">
        </div>
        <!--canvas默认大小300*150-->
        <canvas id="canvas" width="800" height="500">
        </canvas>
    </body>
        <!--导入绘制坐标、网格的js文件-->
        <script type = "text/javascript" src ="mikuCanvasAxes.js"></script>
        <!--导入主要绘图js文件-->
        <!--
            全局变量定义
            函数：窗口坐标转换为Canvas坐标、保存\还原当前绘图表面数据、橡皮筋法相关函数、绘制辅助线相关函数、初始化函数
            事件处理：鼠标down,move,up事件、按钮点击事件、单选框变化事件
        -->
        <script type = "text/javascript" src ="mikuCanvasPaintAppMain.js"></script>
</html>

引入js文件第一个: (mikuCanvasAxes.js)

//Classes----------------------------------------------------
function mikuLoc(locX,locY){
   
    this.x = locX;
    this.y = locY;
}
//Contents---------------------------------------------------
var GRID_STYLE  = "lightgray",
    GRID_LINE_WIDTH = 0.5;
 
var AXES_STYLE  = "#a2a2a2",
    AXES_LINE_WIDTH = 1,
    VERTICAL_TICK_SPACING = 10,
    HORIZONTAL_TIKE_SPACING = 10,
    TICK_WIDTH = 10;
//Function---------------------------------------------------
//绘制网格
//传入参数为：绘图环境,x轴间隔，y轴间隔
function drawGrid(context,stepx,stepy){
   
    context.save();
    context.strokeStyle = GRID_STYLE;
    //设置线宽为0.5
    context.lineWidth   = GRID_LINE_WIDTH;
    //绘制x轴网格
    //注意：canvas在两个像素的边界处画线
    //由于定位机制，1px的线会变成2px
    //于是要+0.5
    for(var i=stepx+0.5;i<context.canvas.width;i=i+stepx){
   
        //开启路径
        context.beginPath();
        context.moveTo(i,0);
        context.lineTo(i,context.canvas.height);
        context.stroke();
        }
        //绘制y轴网格
    for(var i=stepy+0.5;i<context.canvas.height;i=i+stepy){
   
        context.