在使用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. Rust中的控制结构

    fn main() { let number = ; { println!("condition was true"); } else { println!("condi ...

  2. Ubuntu下搭建Kubernetes集群(3)--k8s部署

    1. 关闭swap并关闭防火墙 首先,我们需要先关闭swap和防火墙,否则在安装Kubernetes时会导致不成功: # 临时关闭 swapoff -a # 编辑/etc/fstab,注释掉包含swa ...

  3. 第18.2节_地址类型与LL层设备过滤

    一.地址类型 二.白名单和Resolving List 三.LL层设备过滤 一.地址类型 学习资料:官方手册 Vol 6: Core System Package [Low Energy Contro ...

  4. 过滤身份证号和grep复习

    一.把身份证号过滤出来 我们还是从一道面试题说起. 请从test.txt文件当中过滤出正确的的身份证号码 [root@localhost test.dir]# cat test.txt 赵 37083 ...

  5. 201871010132--张潇潇--《面向对象程序设计（java）》第十六周学习总结

      博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个作业的要求在哪里 https://www.cnblogs.c ...

  6. Github实战测试情况

    测试情况 很久没有熬夜测试程序了,经过测试,没有复现功能的有echo.葫芦娃.火鸡堂.那周余嘉熊掌将得队.为了交项目而干杯.修!咻咻!.云打印和追光的人.据汪老师反应在现场实践课程中大都能实现的,公平 ...

  7. USACO Spinning Wheels

    洛谷 P2728 纺车的轮子 Spinning Wheels https://www.luogu.org/problemnew/show/P2728 JDOJ 1800: Spinning Wheel ...

  8. c++基础第一篇

    前言:我是从c和c++对比的角度来讲解c++的基础知识. (1)c++格式如下: #include <iostream> //标准输入输出头文件 using namespace std; ...

  9. Linux性能优化实战学习笔记：第三十五讲

    一.上节回顾 前面内容,我们学习了 Linux 网络的基础原理以及性能观测方法.简单回顾一下,Linux网络基于 TCP/IP 模型,构建了其网络协议栈,把繁杂的网络功能划分为应用层.传输层.网络层. ...

  10. vs2017远程调试

    使用情景:服务器端程序出了问题,但本地开发环境又无法模拟.此时需要使用VS进行远程调试. 使用方法: 找到VS安装路径,将Remote Debuuger拷贝到服务器端 (注意一定要和你本地运行的VS版 ...