将canvas中左上角的原点坐标位置改为左下角
在使用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中左上角的原点坐标位置改为左下角的更多相关文章
- MFC中状态栏显示鼠标坐标位置
原文:MFC中状态栏显示鼠标坐标位置,蝈蝈 1,利用MFC向导创建一个应用工程ewq. 2,打开ResourceView,右击Menu菜单,插入Menu,在空白处双击,Caption中填入Point. ...
- Java 获取Word中指定图片的坐标位置
本文介绍通过Java程序获取Word文档中指定图片的坐标位置. 程序运行环境: Word测试文档:.docx 2013 Free Spire.doc.jar 3.9.0 IntelliJ IDEA J ...
- 获取鼠标在 canvas 中的位置
一般情况 一般情况下,如果需要在 canvas 中获取鼠标指针坐标,可以通过监听鼠标的 mousemove(如果只需单击时的坐标,可以用 click)事件. 当事件被触发时,我们可以获取鼠标相对于 v ...
- Android自定义View研究--View中的原点坐标和XML中布局自定义View时View触摸原点问题
这里只做个汇总~.~独一无二 文章出处:http://blog.csdn.net/djy1992/article/details/9715047 Android自定义View研究--View中的原点坐 ...
- 鼠标在窗口中的坐标转换到 canvas 中的坐标
鼠标在窗口中的坐标转换到 canvas 中的坐标 由于需要用到isPointInPath函数,所以必须得将鼠标在窗口中的坐标位置转换到canvas画布中的坐标,今天发现网上这种非常常见的写法其 ...
- C#/VB.NET 获取Excel中图片所在的行、列坐标位置
本文以C#和vb.net代码示例展示如何来获取Excel工作表中图片的坐标位置.这里的坐标位置是指图片左上角顶点所在的单元格行和列位置,横坐标即顶点所在的第几列.纵坐标即顶点所在的第几行.下面是获取图 ...
- 讲解Canvas中的一些重要方法
Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...
- android canvas中rotate()和translate()两个方法详解
rotate()和translate() 1.看到这个题目的时候,有人会觉得这不就是一个对画布的旋转和平移的嘛,但是其中的细节的地方还是需要深究一下的. 例如:有个需求将TextView的文字竖直显示 ...
- WPF在Canvas中绘图实现折线统计图
最近在WPF中做一个需要实现统计的功能,其中需要用到统计图,之前也没有接触过,度娘上大多都是各种收费或者免费的第三方控件,不想用第三方控件那就自己画一个吧. 在园子还找到一篇文章,思路来自这篇文章,文 ...
随机推荐
- XLM论文原理解析
1. 前言 近一年来,NLP领域发展势头强劲,从ELMO到LSTM再到去年最牛叉的Google Bert,在今年年初,Facebook又推出了XLM模型,在跨语言预训练领域表现抢眼.实验结果显示XLM ...
- Rust中的错误处理
Result & Panic 这次讲得详细,从错误的来历及简写过程, 都写明白了, 先浅,再深,先深,再浅, 反复之, 学习王道~ use std::fs::File; //use std:: ...
- 生产者和消费者模型producer and consumer(单线程下实现高并发)
#1.生产者和消费者模型producer and consumer modelimport timedef producer(): ret = [] for i in range(2): time.s ...
- svn版本库操作(四)
一.使用命令行模式访问 SVN 服务器 1. 检出(checkout) (1) 首先进入自己的工作目录,例如:D:\svnSpace cd D:\svnSpace (2) 运行 svn checkou ...
- AWS云部署项目——数据库与服务器
1.连接数据库 选择服务RDS,进入后点击数据库实例,在之前建好的数据库内进行操作 首先是安全组,类似于aws云上的防火墙一样的东西,先设置好公开性,安全组置为default(就是尽量避免测试时访问阻 ...
- 详解 ASP.NET Core MVC 的设计模式
MVC 是什么?它是如何工作的?我们来解剖它 在本节课中我们要讨论的内容: 什么是 MVC? 它是如何工作的? 什么是 MVC MVC 由三个基本部分组成 - 模型(Model),视图(View)和控 ...
- B1020 月饼(25分)
#include<cstdio> #include<algorithm> #include<iostream> using namespace std; struc ...
- @Value不能给静态变量直接赋值问题
1. 平时用的时候,直接在变量头上加上@Value就能到值(其中path.url是配置文件properties的.). @Value("${path.url}") private ...
- [转载]3.14 UiPath图片操作截图的介绍和使用
一.截图(Take Screenshot)的介绍 截取指定的UI元素屏幕截图的一种活动,输出量仅支持图像变量(image) 二.Take Screenshot在UiPath中的使用 1.打开设计器,在 ...
- git拆分仓库
1.git filter-branch拆分当前分支 修改仓库目录,改成拆分后的结构 创建一个当前分支的拷贝分支 git filter-branch -f --tag-name-filter cat - ...