在使用canvas的时候，原点坐标在左上角，这个很犯人，因为一般的坐标基本都是在左下角，即笛卡尔坐标系，那怎么进行转变呢，在这里用到了canvas的translate，rotate，和scale进行转换，话不多说，上代码：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.     <title>笛卡尔坐标系</title>
  6. </head>
  7.  
  8. <body onload="draw()">
  9. <canvas id="myCanvus" width="440px" height="240px" style="border:1px dashed black;">
  10.     出现文字表示你的浏览器不支持HTML5
  11. </canvas>
  12. </body>
  13. </html>
  14. <script type="text/javascript">
  15.     <!--
  16.     function draw(){
  17.         var canvas=document.getElementById("myCanvus");
  18.         var canvasWidth=440;
  19.         var canvasHeight=240;
  20.  
  21.         var context=canvas.getContext("2d");
  22.  
  23.         context.fillStyle = "white";
  24.         context.fillRect(0, 0, canvasWidth, canvasHeight);
  25.  
  26.         context.strokeStyle = "black";
  27.         context.fillStyle = "black";
  28.  
  29.         context.save();
  30.  
  31.         // 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向
  32.  
  33.         context.save();
  34.         context.translate(0,canvasHeight);
  35.         context.rotate(getRad(180));
  36.         context.scale(-1,1);
  37.  
  38.         // 画折线
  39.         context.beginPath();
  40.         context.moveTo(0, 0);
  41.         context.lineTo(50, 50);
  42.         context.stroke();
  43.         context.closePath();
  44.  
  45.         context.restore();
  46.  
  47.     }
  48.  
  49.     function getRad(degree){
  50.         return degree/180*Math.PI;
  51.     }
  52.     //-->
  53. </script>

　　

将canvas中左上角的原点坐标位置改为左下角的更多相关文章

  1. MFC中状态栏显示鼠标坐标位置

    原文:MFC中状态栏显示鼠标坐标位置,蝈蝈 1,利用MFC向导创建一个应用工程ewq. 2,打开ResourceView,右击Menu菜单,插入Menu,在空白处双击,Caption中填入Point. ...

  2. Java 获取Word中指定图片的坐标位置

    本文介绍通过Java程序获取Word文档中指定图片的坐标位置. 程序运行环境: Word测试文档:.docx 2013 Free Spire.doc.jar 3.9.0 IntelliJ IDEA J ...

  3. 获取鼠标在 canvas 中的位置

    一般情况 一般情况下,如果需要在 canvas 中获取鼠标指针坐标,可以通过监听鼠标的 mousemove(如果只需单击时的坐标,可以用 click)事件. 当事件被触发时,我们可以获取鼠标相对于 v ...

  4. Android自定义View研究--View中的原点坐标和XML中布局自定义View时View触摸原点问题

    这里只做个汇总~.~独一无二 文章出处:http://blog.csdn.net/djy1992/article/details/9715047 Android自定义View研究--View中的原点坐 ...

  5. 鼠标在窗口中的坐标转换到 canvas 中的坐标

        鼠标在窗口中的坐标转换到 canvas 中的坐标 由于需要用到isPointInPath函数,所以必须得将鼠标在窗口中的坐标位置转换到canvas画布中的坐标,今天发现网上这种非常常见的写法其 ...

  6. C#/VB.NET 获取Excel中图片所在的行、列坐标位置

    本文以C#和vb.net代码示例展示如何来获取Excel工作表中图片的坐标位置.这里的坐标位置是指图片左上角顶点所在的单元格行和列位置,横坐标即顶点所在的第几列.纵坐标即顶点所在的第几行.下面是获取图 ...

  7. 讲解Canvas中的一些重要方法

    Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...

  8. android canvas中rotate()和translate()两个方法详解

    rotate()和translate() 1.看到这个题目的时候,有人会觉得这不就是一个对画布的旋转和平移的嘛,但是其中的细节的地方还是需要深究一下的. 例如:有个需求将TextView的文字竖直显示 ...

  9. WPF在Canvas中绘图实现折线统计图

    最近在WPF中做一个需要实现统计的功能,其中需要用到统计图,之前也没有接触过,度娘上大多都是各种收费或者免费的第三方控件,不想用第三方控件那就自己画一个吧. 在园子还找到一篇文章,思路来自这篇文章,文 ...

随机推荐

  1. echarts-带面积的折线图

    测试地址 https://gallery.echartsjs.com/editor.html?c=x6p5SsIEzt var listN = '高温'; var unit = '°C'; //单位 ...

  2. @TableField(select=false)

    使用这个注解排除删除标识字段.

  3. 关于几类STL容器swap的复杂度问题

    \(swap\)的方式有 \(S1.swap(S2)\) 或 \(swap(S1,S2)\) \(vector,map,set,deque \ \ \ \ swap\)复杂度:\(O(1)\) \(p ...

  4. Linux性能优化实战学习笔记：第十二讲

    一.性能优化方法论 不可中断进程案例 二.怎么评估性能优化的效果? 1.评估思路 2.几个为什么 1.为什么要选择不同维度的指标? 应用程序和系统资源是相辅相成的关系 2.性能优化的最终目的和结果? ...

  5. Metasploit 常用命令手册

    Installation curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/template ...

  6. oracle--ORA-38760

    01,ORA-38760: This database instance failed to turn on flashback 02,问题处理思路 第一步:查看日志文件 查看这次启动的时候alter ...

  7. GreenPlum 大数据平台--增加segment

    01,增加机器的配置 需要增加的机器安装greenplum 软件(操作见greenplum安装部署章节) 02,分配机器存储区域 03,配置互信 使用gpssh-exkeys确保Segment主机能通 ...

  8. RHEL8/CentOS8的基础防火墙配置-用例

    systemctl systemctl unmask firewalld #执行命令,即可实现取消服务的锁定 systemctl mask firewalld # 下次需要锁定该服务时执行 syste ...

  9. Destoon手机搜索点击提示 http 403 forbidden解决方法

    以下是网上搜到的答案: 最近发现用destoon开发的手机版网站,在手机版百度搜素网站的时候,点击之后出现 http 403 forbidden的弹出窗.必须再次的刷新网页才可以打开网站.出现这个问题 ...

  10. 如何解决macbook pro摄像头不工作的问题

    背景:上周用qq视频聊天都正常,这周突然显示检测不到摄像头.打开facetime和photo booth也显示“相机未连接”排查一切问题后只好给苹果客服打电话,在客服的帮助下解决了这个问题. 解决办法 ...