在使用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. 201871010135 张玉晶《面向对象程序设计（java）》第十一周学习总结

    项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...

  2. 精通awk系列

    安装新版本gawk awk有很多种版本,例如nawk.gawk.gawk是GNU awk,它的功能很丰富. 本教程采用的是gawk 4.2.0版本,4.2.0版本的gawk是一个比较大的改版,新支持的 ...

  3. 源码解读：webdriver client的原理

    前言 又到年底了,群里很多朋友说要开始备战2020金三银四,其实,我建议是,如果你不是技术大牛,就不要去凑热闹. 其实,现在(11,12月份)就是最佳换工作的时候,因为很多人想等着拿了年终再走,虽然招 ...

  4. 万字长文把 VSCode 打造成 C++ 开发利器

    https://zhuanlan.zhihu.com/p/96819625 面对大量代码,在开发任务繁重场景下,VSCode 绝对是一把利器.本文虽以 C++为引,但在 python.php.java ...

  5. USACO Cow Contest

    洛谷 P2419 [USACO08JAN]牛大赛Cow Contest https://www.luogu.org/problemnew/show/P2419 JDOJ 2554: USACO 200 ...

  6. [BZOJ1040][CODEVS1423][ZJOI2008]骑士

    题目描述 Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略 ...

  7. [Algorithm] 617. Merge Two Binary Trees

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  8. 知识点总结 REACT

    1.react中如何创建一个组件 ES6:class 组件名 extends Component{} ES5:var App=React.createClass({}) 2.render函数什么时候会 ...

  9. 宏任务和微任务：setTimeout和Promise执行顺序

    先以一道面试题做引子: 写出这段程序的输出内容: setTimeout(function(){ console.log(); },); new Promise(function(a,b){ conso ...

  10. Maven使用第三方Jar文件

    本例中,需要在Maven项目里添加uiautomator.jar文件.以下介绍两种方法: 方法一:在pom.xml里指定jar文件目录 <dependency> <groupId&g ...