在使用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. React 借助pubsub-js进行兄弟组件的传递值

    1===> raect中两个 兄弟组件 互相通信使用的技术 使用 消息订阅(subscribe)和发布(publish)机制 s儿 伯 s rai b pʌ b lɪ ʃ 有一个库可以处理 Pu ...

  2. VS调试

    1.调试输出变量值 F9先设置断点,开始调试后,依次选择调试——>窗口——>局部变量和监视——>监视1. 点击“全部中断”——>之后局部变量会显示相关变量值,监视1可以查看变量 ...

  3. 第15节_BLE协议GATT层

    学习资料:官方手册 Vol 3: Core System Package [Host volume] Part G: Generic Attribute Profile (GATT) 这篇文章格式比较 ...

  4. Photoshop cc 2019 下载链接

    [安装环境]:win7/win8/win10 [64位下载] 百度网盘链接:pan.baidu.com/s/14vwkeez-jAx8WVkXXUgfPQ  提取码:797f

  5. ETA：

    Route-based models - Simple Additive Model- Data-driven Model Path-free models - MURAT Model Chun-Hs ...

  6. JDOJ 1946 求最长不下降子序列个数

    Description 设有一个整数的序列:b1,b2,…,bn,对于下标i1<i2<…<im,若有bi1≤bi2≤…≤bim 则称存在一个长度为m的不下降序列. 现在有n个数,请你 ...

  7. 为什么说要搞定微服务架构，先搞定RPC框架

    今天开始聊一些微服务的实践,第一块,RPC框架的原理及实践,为什么说要搞定微服务架构,先搞定RPC框架呢? 一.需求缘起 服务化的一个好处就是,不限定服务的提供方使用什么技术选型,能够实现大公司跨团队 ...

  8. 实现 Cloneable 需要注意

    产品Product里面包含BaseInfo对象:Product(productName,companyName,baseinfo)如果implement Cloneable  需要实现   注意强转类 ...

  9. [LeetCode] 623. Add One Row to Tree 二叉树中增加一行

    Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with value ...

  10. okhttp 发送get post 请求

    package com.qlwb.business.util; import java.util.Map; import com.alibaba.fastjson.JSON; import okhtt ...