在使用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. Unity整合TortoiseSVN

    解决各种漏传 资源 / 代码 的疑难杂症. 因为Unity比较特殊的meta文件系统, 忘传漏传文件在后期可能导致重大引用丢失, 将SVN整合进项目势在必行. TortoiseSVN自带了命令行工具, ...

  2. 通过fiddler抓包，用jmeter实现multipart/form-data类型请求

    Fiddler抓包结果如下: 1.multipart/form-data的基础方式是post,也就是说通过post组合方式来实现的.2.multipart/form-data于post方法的不同之处在 ...

  3. pdfium:创建CreateNewDoc

    CreateNewDoc  //创建文档   https://github.com/PureFusionOS/android_external_pdfium/blob/040b899a933cdb37 ...

  4. 生产器&迭代器

    生成器 列表生成器:简洁代码 >>> a = [i+1 for i in range(10)] >>> a [1, 2, 3, 4, 5, 6, 7, 8, 9, ...

  5. JDOJ 1929: 求最长不下降序列长度

    JDOJ 1929: 求最长不下降序列长度 JDOJ传送门 Description 设有一个正整数的序列:b1,b2,-,bn,对于下标i1<i2<-<im,若有bi1≤bi2≤-≤ ...

  6. org.slf4j.helpers.Log4jLoggerFactory is not on classpath. Good!

    View Javadoc 1 /* 2 * Licensed to the Apache Software Foundation (ASF) under one or more 3 * contrib ...

  7. [CODEVS4632][BZOJ4326]运输计划

    题目描述 Description 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球.小 P ...

  8. leetcode组合总和 Ⅳ 解题路径

    题目: 关于动态规划类题目的思路如何找在上一篇博客 https://www.cnblogs.com/niuyourou/p/11964842.html 讲的非常清楚了,该博客也成为了了leetcode ...

  9. Spring Batch 跑批框架

    SpringBatch的框架包括启动批处理作业的组件和存储Job执行产生的元数据. 如果作为一个批处理应用程序的开发人员,你暂时没有必要跟这些组件打交道, 因为它们主要为我们提供组件支持的角色,但是您 ...

  10. NLP之预训练

    内容是结合:https://zhuanlan.zhihu.com/p/49271699 可以直接看原文 预训练一般要从图像处理领域说起:可以先用某个训练集合比如训练集合A或者训练集合B对这个网络进行预 ...