<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>translate</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    ctx.beginPath();

    ctx.strokeStyle = '#000000';

    ctx.strokeRect(10, 10, 150, 100);

    ctx.translate(50, 100);

    ctx.beginPath();

    ctx.strokeStyle = '#cccccc';

    ctx.strokeRect(10, 10, 150, 100);

    </script>

</body>

</html>

Canvas translate- 平移的更多相关文章

  1. Android canvas rotate():平移旋转坐标系至任意原点任意角度-------附：android反三角函数小结

    自然状态下,坐标系以屏幕左上角为原点,向右是x正轴,向下是y正轴.现在要使坐标系的原点平移至任一点O(x,y),且旋转a角度,如何实现? 交待下我的问题背景,已知屏幕上有两点p1和p2,构成直线l.我 ...

  2. HTML5 canvas translate() 方法

    HTML5 canvas translate() 方法 translate() 方法重新映射画布上的 (0,0) 位置.

  3. 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...

  4. Transform.Translate 平移

    function Translate (translation : Vector3, relativeTo : Space = Space.Self) : void Description描述 Mov ...

  5. Win10 UI入门 RenderTransform属性分析之Translate 平移变形

    对齐方式是中心底部对齐: HorizontalAlignment="Center" VerticalAlignment="Bottom" 以底部边为起始线,向上 ...

  6. 【转】android Graphics（四）：canvas变换与操作

    android Graphics(四):canvas变换与操作 分类: 5.andriod开发2014-09-05 15:05 5877人阅读 评论(18) 收藏 举报   目录(?)[+]   前言 ...

  7. android Graphics（四）：canvas变换与操作

    前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清 ...

  8. 利用canvas制作图片（可缩放和平移）+相框+文字

    前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...

  9. android canvas中rotate()和translate()两个方法详解

    rotate()和translate() 1.看到这个题目的时候,有人会觉得这不就是一个对画布的旋转和平移的嘛,但是其中的细节的地方还是需要深究一下的. 例如:有个需求将TextView的文字竖直显示 ...

  10. canvas的save与restore方法的作用

    网上搜罗了一堆资料,最后总结一下. save:用来保存Canvas的状态.save之后,可以调用Canvas的平移.放缩.旋转.错切.裁剪等操作. restore:用来恢复Canvas之前保存的状态. ...

随机推荐

  1. Android网络开发之Volley--Volley基本用法StringRequest(一)

    1.StringRequest用法 主要分为3步: (1).实例化一个RequestQueue对象 (2).设置StringRequest对象参数,并将StringRequest对象加入Request ...

  2. Python+Selenium WebDriver API：浏览器及元素的常用函数及变量整理总结

    由于网页自动化要操作浏览器以及浏览器页面元素,这里笔者就将浏览器及页面元素常用的函数及变量整理总结一下,以供读者在编写网页自动化测试时查阅. from selenium import webdrive ...

  3. javascript 中 arguments.callee属性

    javascript 中 arguments.callee属性 可以在函数内部,指向的是这个函数(或者叫做“类”)本身. 相当于PHP 中的 self 关键字. The arguments.calle ...

  4. 函数之局部变量和使用global语句

    局部变量当你在函数定义内声明变量的时候,它们与函数外具有相同名称的其他变量没有任何关系,即变量名称对于函数来说是 局部 的.这称为变量的 作用域 .所有变量的作用域是它们被定义的块,从它们的名称被定义 ...

  5. 17、手把手教你Extjs5（十七）模块的新增、修改、删除操作

    上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色.小数位数.零值是否显示.货币符号.单位显示在标题栏或者跟在金 ...

  6. iOS 页面跳转，离开之前pop掉navigationController栈中的页面

    http://blog.csdn.net/worldzhy/article/details/41312713 - (void)viewDidDisappear:(BOOL)animated { //因 ...

  7. tp框架中的静态验证

    //制定命名空间在Home 模块下Model文件夹下 如:namespace Home\Model; //引用父类 如:use Think\Model; //实例化表 如:class ZhuCeMod ...

  8. ucos信号量集源码分析

    在实际的应用之中,一个任务经常需要等待多个信号量的同时生效,或者说任务需要根据多个信号量的组合作用的结果来决定任务的运行方式,为了实现这种多信号量组合的功能,ucos实现了信号量集的特殊结构. 信号量 ...

  9. Powerbuilder编程技巧 如何获取网页的HTML源码

    直接使用的三种方式 1.  PB内部对象 Inet object 2.  API 函数 3.  Ole中的Microsfot Web 游览器对象 一.Inet object: 1.Inet objec ...

  10. iOS 改变导航栏高度

    需求: appdelegate里 rootviewcontroller 是tabbarcontroller,tabbarcontroller里有4个navigationcontroller,改变每个n ...