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

<!DOCTYPE html>

<html lang="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<head>

    <title>笛卡尔坐标系</title>

</head>

<body onload="draw()">

<canvas id="myCanvus" width="440px" height="240px" style="border:1px dashed black;">

    出现文字表示你的浏览器不支持HTML5

</canvas>

</body>

</html>

<script type="text/javascript">

    <!--

    function draw(){

        var canvas=document.getElementById("myCanvus");

        var canvasWidth=440;

        var canvasHeight=240;

        var context=canvas.getContext("2d");

        context.fillStyle = "white";

        context.fillRect(0, 0, canvasWidth, canvasHeight);

        context.strokeStyle = "black";

        context.fillStyle = "black";

        context.save();

        // 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向

        context.save();

        context.translate(0,canvasHeight);

        context.rotate(getRad(180));

        context.scale(-1,1);

        // 画折线

        context.beginPath();

        context.moveTo(0, 0);

        context.lineTo(50, 50);

        context.stroke();

        context.closePath();

        context.restore();

    }

    function getRad(degree){

        return degree/180*Math.PI;

    }

    //-->

</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. JS高阶---回调函数

    1.什么函数是回调函数? 此时两者的执行并没有先后顺序 两个都是回调函数 满足三个特点就是回调 .定义了函数 .没有主动调用 .最后执行了 2.常见的回调函数有哪些? .DOM事件回调函数 .定时器回 ...

  2. shell 字符菜单管理

    1.创建一个脚本func.sh 脚本如下func2.sh #!/bin/bash function menu(){ title="My Menu" url="www.la ...

  3. GitHub操作（五）

    GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub. 1. 打开浏览器,输入GitHub的网址https://github.co ...

  4. 快速调用Android虚拟机

    由于使用Android studio开发flutter 每次打开软件都需要很长时间,所以我自己使用vscode进行开发,没有虚拟机也开发不了,于是就有了这篇博客的作用啦 在本地桌面新建一个xxx.ba ...

  5. 【未完成】【Mybatis】字段由字符+数字变量组成，但要对变量进行计算

    ??????????????????????

  6. CentOS7 部署nfs服务

    参考博客 参考博客 https://blog.51cto.com/addam/1576144 错误1: 客户端挂载nfs报错mount: wrong fs type, bad option, bad ...

  7. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  8. 新电脑安装操作系统一定要注意硬盘是否被bitlocker加密！

    新电脑安装操作系统一定要注意硬盘是否被bitlocker加密! 前段时间帮一MM的戴尔灵越14燃5488装机,购买不久的电脑,硬盘是被bitlocker加密的,鬼知道戴尔为什么这么过分.按照常规思路, ...

  9. [LeetCode] 794. Valid Tic-Tac-Toe State 验证井字棋状态

    A Tic-Tac-Toe board is given as a string array board. Return True if and only if it is possible to r ...

  10. Codeforces 126B Password（Z算法）

    题意 给定一个字符串 \(s\) ,求一个子串 \(t\) 满足 \(t\) 是 \(s\) 的前缀.后缀且在除前缀后缀之外的地方出现过. \(1 \leq |s| \leq 10^6\) 思路 \( ...