<!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. zepto的源代码注释（转）

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  2. ural1414 Astronomical Database

    Astronomical Database Time limit: 2.0 secondMemory limit: 64 MB After the Hubble telescope had been ...

  3. JAVA中SSL证书认证通讯

    JAVA中SSL证书认证通讯 SSL通讯服务端 /******************************************************************** * 项目名称 ...

  4. 2016"百度之星" - 资格赛（Astar Round1） Problem B

    规律题,斐波那契数列,数据有毒,0的时候输出换行.会爆longlong,写个大数模板或者Java搞. import java.io.BufferedInputStream; import java.m ...

  5. eclipse创建android项目，无法正常预览布局文件

    http://jingyan.baidu.com/article/d621e8da0e0e052865913fae.html

  6. Lua学习系列（五）

    calling C functions from Lua 5.2 这篇文章也不错: http://blog.csdn.net/x356982611/article/details/26688287 h ...

  7. angular change the url , prevent reloading

    http://stackoverflow.com/questions/14974271/can-you-change-a-path-without-reloading-the-controller-i ...

  8. JAVA基础--代理模式

    interface Network{ public void browse() ; // 浏览 } class Real implements Network{ public void browse( ...

  9. echarts 系列一

    由于近期项目需要做地图方便的可视化图标,经过比较最终选定echarts. echarts在可视化视图方面非常强大,可以满足大多数开发需求. 采用标签式引入js文件,引用的js 文件位置 echarts ...

  10. C# DateTime简单的定时器用法

    DateTime是C#中的时间类,有公共索引器Now可以获取当前时间. 如果制作简单定时器的话,可以这样: 初始化:DateTime lasttime=DateTime.Now; TimeSpan t ...