精华内容
下载资源
问答
  • canvas坐标轴旋转

    2020-11-28 17:41:52
    如何旋转canvas坐标

    画图的时候会创建一个canvas,画一些元素的时候需要计算图形在canvas上的坐标,这时候在canvas上的坐标系是这样的。
    在这里插入图片描述
    有时候为了方便可以,将起始点放在canvas中间,然后将y轴的方向改为向上:
    在这里插入图片描述

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // 原来坐标系的起点在canvas的左上角(0, 0),现在将起点定在(128, 128)这个点上
    ctx.translate(128, 128);
    // 原先y轴是向下的,现在改为向上
    ctx.scale(1, -1);
    

    有时候选择坐标系,可以简化坐标的计算量,不仅让代码容易理解,也节省了CPU运算的时间。

    展开全文
  • 我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更...使用Canvas绘制具有x,y的直角坐标轴,并在上绘制相应的刻度条。 演示 在线演示 代码教程 通过常量来计...

    我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

    教程介绍、教程目录等能在README里查阅。

    传送门:https://github.com/827652549/CanvasStudy

    介绍

    使用Canvas绘制具有x,y轴的直角坐标轴,并在轴上绘制相应的刻度条。

    演示

    在线演示

    代码教程

    通过常量来计算坐标轴属性,例如坐标轴宽高,刻度线间距等等,设置好这些属性后,剩余代码基本上都在按照beginPath()、moveTo()、lineTo()、stroke()的顺序绘制坐标轴和其刻度线。

    所有的相关常量含义和方法说明都以注释的形式写在了代码之中。

    详细代码

     

    展开全文
  • 我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门:https://github.com/827652549/CanvasStudy ...

    我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

    教程介绍、教程目录等能在README里查阅。

    传送门:https://github.com/827652549/CanvasStudy

    介绍

    我们之前介绍了坐标轴的绘制,但是没有添加数字标签表示刻度。现在直接在上个坐标轴版本上完善添加数字标签,效果如图所示。

    在线演示  详细代码

     请注意,应用程序会设置textAlign和textBaseline的值,在绘制水平坐标轴上文本标签分别设置”center“和”top“,在绘制垂直坐标轴时,则设置“right”和”middle“。

     

    展开全文
  • Canvas绘制坐标轴、折线图

    千次阅读 2018-07-19 12:38:53
    canvas{ border: 1px solid saddlebrown; } var cvs=document.getElementByI...







    body{
    background:black;
    }
    canvas{
    border: 1px solid saddlebrown;
    }





    var cvs=document.getElementById(“cvs”);
    var ctx =cvs.getContext(“2d”);
    var padding={
    top:10,
    left:10,
    right:10,
    bottom:10
    }
    var arrow={
    width:10,
    height:20
    }
    //绘制坐标轴上方
    var vertexTop={
    x:padding.left,
    y:padding.top
    }
    //绘制原点
    var origin={
    x:padding.left,
    y:cvs.height-padding.bottom
    }
    //绘制下方点
    var vertexBottom={
    x:cvs.width-padding.right,
    y:cvs.height-padding.bottom
    }
    ;
    //绘制线
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(origin.x,origin.y);
    ctx.lineTo(vertexBottom.x,vertexBottom.y);
    ctx.stroke();
    //绘制上箭头
    ctx.beginPath();
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(vertexTop.x-arrow.width/2,vertexTop.y+arrow.height);
    // ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(vertexTop.x,vertexTop.y+arrow.height/2);
    ctx.lineTo(vertexTop.x+arrow.width/2,vertexTop.y+arrow.height);
    ctx.closePath();
    ctx.fill();
    // ctx.stroke();
    //绘制右箭头
    ctx.moveTo(vertexBottom.x,vertexBottom.y);
    ctx.lineTo(vertexBottom.x-arrow.height,vertexBottom.y-arrow.width/2);
    //让箭头变得有质感
    ctx.lineTo(vertexBottom.x-arrow.height/2,vertexBottom.y);
    ctx.lineTo(vertexBottom.x-arrow.height,vertexBottom.y+arrow.width/2);
    // ctx.closePath();
    ctx.closePath();
    ctx.fill();

    // //在指定位置随意画一点
    // ctx.fillRect(origin.x+100,origin.y-100,10,10);
    // //在坐标轴上画四个点([10,10],[50,70],[30,20],[40,60])
    // var points=[[10,10],[30,70],[80,20],[110,60]];
    // points.forEach(function(arr){
    // ctx.fillRect(origin.x+arr[0],origin.y-arr[1],2,2);
    // })
    // //画折线
    // ctx.beginPath();
    // points.forEach(function(arr){
    // ctx.lineTo(origin.x+arr[0],origin.y-arr[1]);
    // })
    // ctx.stroke();

        //等比例
        // 求坐标轴默认可显示数据的最大值
        coordMaxX = cvs.width - padding.left - padding.right - arrow.height;
        coordMaxY = cvs.height - padding.top - padding.bottom - arrow.height;
    
        var data = [ 10, 2, 40, 60, 120, 180, 100, 50, 2 ];
        // 求数据缩放的比例
        var ratioX = coordMaxX / data.length;
        var ratioY = coordMaxY / Math.max.apply( null, data );
        // 根据比例,对元数据进行缩放
        var ratioData = data.map( function( val, i ) {
            return val * ratioY;
        });
    
            // 画点
        ratioData.forEach( function( val, index ) {
            ctx.fillRect( origin.x + ( index * ratioX) - 2, origin.y - val - 2, 4, 4 );
        });
    
        // 画折线
        ctx.beginPath();
        ratioData.forEach( function( val, index ) {
            ctx.lineTo( origin.x + ( index * ratioX), origin.y - val );
        });
       ctx.stroke();
    
        //数据可视化
    

    // data.forEach(function(val,index){
    // ctx.fillRect(origin.x + index*20-2,origin.y-val-2,4,4);
    // })
    // // //画折线
    // ctx.beginPath();
    // data.forEach(function(val,index){
    // ctx.lineTo(origin.x + index*20,origin.y-val);
    // })
    // ctx.stroke();


    展开全文
  • Canvas学习系列二:Canvas坐标系统

    千次阅读 2017-06-13 11:02:12
    但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么位置。 比如:我们要在canvas画布的(100,100)这个位置绘制一个圆 看到这个要求顿时就懵逼了,(100, 100)在什么地方...
  • HTML5绘图之Canvas标签 绘制坐标轴

    千次阅读 2016-07-05 13:59:29
    因为最近在做数据的统计,需要表现在网页上 也查过一些插件和一些绘图语言,学习时间成本太高,所以用上了HTML5的Canvas标签和JavaScript,可以很快的满足我需要的绘图需求JavaScript中前两句: var ... 第一句获取
  • 获取canvas中鼠标的坐标

    万次阅读 2017-06-01 17:04:41
    获取canvas中鼠标的坐标
  • 使用canvas绘制网格与坐标轴

    千次阅读 2019-07-29 20:52:34
    二、绘制坐标轴 一、绘制网格 网格效果: 代码: drawGrid.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • Canvas.GetTop(Button); Canvas.GetLeft(Button);
  • 展示canvas坐标

    千次阅读 2019-05-18 12:01:54
    2获取canvas中鼠标的位置坐标。 e.clientX; e.clientY; 3document.getElementById(id);//返回对拥有指定 ID 的第一个对象的引用。 4innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容; 如:这是内容...
  • canvas画布中获取鼠标点击的坐标 思路: 给canvas绑定一个点击事件,结合绑定事件,进行获取坐标 环境: 前端vue,后端django 前端: html: <div> <canvas id="canvas" width="" height="">&...
  • 在写公司项目的时候,需要画一个垂直的SeekBar,一开始就是简单的在xml文件里面,添加了android:rotate="-90"这个配置,不过后面...一.Canvas坐标系介绍 一般来讲,一个自定义view的canvas的显示区域就是View的...
  • 在QML中显示坐标轴,并可以动态添加曲线
  • canvas画布获取定位的坐标位置

    千次阅读 2019-06-14 09:08:55
    方法一: cvs.onclick = function (e) { if (e.offsetX || e.layerX) { var x = e.offsetX == undefined ? e.layerX : e.offsetX; var y = e.offsetY == undefined ? e.layerY : e.offsetY; ...
  • canvas坐标系转为webgl坐标系,webgl的坐标是x[-1, 1],y[-1, 1]。 ①获取canvas在浏览器客户区中的坐标 var x = ev.clientX; var y = ev.client.Y; var rect = ev.target.getBoundingClientRect(); 图中的P点(x,y...
  • canvas获取轨迹坐标,实际上就是获取从左到右,从上到下,满足轨迹颜色的像素位置。 基础知识: 一个dot有r、g、b、a四位 getDotList(){ this.canvas = document.getElementById(this.domId); this.context ...
  • 我们画布中默认的坐标轴与浏览器坐标轴相同  x正半轴朝右  y正半轴朝下  但是我们可以手动设置画布坐标轴变换  首先还是会获取“画布”和“画笔” canvas id="myCanvas" width=500 height=500>canvas>11var...
  • 今天一个同事问我怎么样获取UI在Canvas下的2D坐标。我查了一下API,其实很简单。如下图所示,UI比较复杂了子节点会很多,假设我想获取某个子的子节点的2D坐标。 首先我们要搞清楚 transform.postion 和 rect...
  • 【实例】html5在canvas上绘制坐标轴

    万次阅读 2015-08-17 16:37:42
    直接上代码 #canvas { border: thin solid red;... var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //水平标尺与canvas的距离 var H
  • 小白一个,不太懂怎么用canvas获取坐标相关的知识,求大神给支个招
  • 客户端区域坐标转换为 Canvas 坐标

    千次阅读 2017-04-15 12:53:35
    通过 MouseEvent.clientX 和 MouseEvent.clientY 可以获得鼠标在浏览器客户端区域的...方法来实现客户端区域坐标canvas 坐标之间的转换。 function windowToCanvas (canvas, x, y) { var bbox = canvas.get
  • Unity 中 Screen坐标 转 Canvas坐标

    千次阅读 2019-09-20 12:24:29
    必须要进行坐标转换的原因是, 1、设备实际的 “屏幕宽高” 和 “Canvas宽高” 不同,不能直接使用 “屏幕宽高”参与计算。 2、设备实际的 “屏幕宽高比” 和 “Canvas宽高比” 不同,使得在一些屏幕适配方案下...
  • Canvas坐标系与绘图坐标系

    千次阅读 2017-07-26 01:14:52
    Canvas坐标系指的是Canvas本身的坐标系,Canvas坐标系有且只有一个,且是唯一不变的,其坐标原点在View的左上角,从坐标原点向右为x的正半轴,从坐标原点向下为y的正半轴。 绘图坐标系  Canvas的drawXXX...
  • 今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对
  • web canvas图片标点 得像素坐标数组

    千次阅读 2019-09-07 11:14:06
    web前端 在图片上标点 获取坐标 Vue 最近在开发过程中有一个需求: 要在一个不规则的物体图片上画标点,获取所有坐标,然后计算出相对面积。 步骤思路: 用canvas元素,进行导入图片 获取鼠标坐标 canvas相对浏览器...
  • Unity3d UI控件相对于Canvas坐标

    千次阅读 2020-07-04 10:23:15
    //rect参数是是想要获取的相对控件的坐标,即Canvas控件 //screenPoint参数是控件世界坐标转换为屏幕坐标 //cam参数是与Canvas相关联的摄像机。 //对于画布中的RectTransform设置为Screen Space - Overlay模式,cam...
  • 2. UGUI获取UI在Canvas下的坐标 以下是获取UI左下角位置的坐标: public Vector2 leftPos; public RectTransform QRCodeBorder; leftPos = Camera.main.WorldToScreenPoint(QRCodeBorder.transform....
  • canvas绑定事件的时候,获得鼠标点击的地方在canvas画布内的坐标的方法。 var x = event.clientX - canvas.getBoundingClientRect().left; var y = event.clientY - canvas.getBoundingClientRect().top; 复制代码...
  • 最近在学习Canvas过程中,学到建立坐标系过程中。在确定了步骤之后,发现原点确立有个小问题。 刚开始确定了6个步骤: 但是在原点确立过程中,发现在我设置了space和arrowSizede的值时(旁边是我自己的理解),发现y...
  • canvas在空标签没有任何额外手动添加的属性时,默认宽高为300*150px // 默认宽高300*150px ...这时就引出两个坐标系概念,一个是在屏幕上显示的真实尺寸,一个是在canvas内的坐标 <canvas id="test"...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,760
精华内容 28,304
关键字:

获取canvas的坐标轴坐标