<!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. js 复制内容到剪切板

    function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...

  2. js 获取n天前的时间

    <script type="text/javascript"> var strdate = new Date(); var begindate = strdate.ge ...

  3. DML、DDL、DCL区别及介绍

    DML(data manipulation language):        它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作 ...

  4. JAVA调用c/c++代码

    JNI是Java Native Interface的缩写,中文为JAVA本地调用.使用JNI可以很方便的用我们的Java程序调用C/C++程序.很多时候,某些功能用Java无法实现,比如说涉及到底层驱 ...

  5. Quick Cocos2dx 版本更新

    呵呵,不出所料,我又把项目的quick x版本从2.2.1升级到2.2.3了,不知道下次升级到3.x回事神马时候呢,好期待的说. 话说运行2.2.3的player的时候,老是提醒我显卡不支持openg ...

  6. 12、手把手教你Extjs5（十二）执行菜单命令在tabPanel中显示模块

    上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和 ...

  7. [转]配置 VIM 的 Go 语言开发环境

    本文是针对像我这样的 VIM 小白而写的,所使用的 VIM-GO 插件虽然步骤简单但不够详细,特写此文以做记录和分享.欢迎各位大神纠正补充! 特别说明 本博文不是 Go 语言环境搭建教程,只是 VIM ...

  8. 012-ViewState状态保持

    客户端的状态保持方案:ViewState.隐藏域.Cookies.控件状态.URL查询参数服务端的状态保持方案:Session(会话).Application.Caching(缓存).DataBase ...

  9. jQuery源码学习（1）：整体架构

    整体架构 $().find().css().hide() 从jQuery的表达式可以看出两点: jQuery的构建方式 jQuery的调用方式 下面从这两方面来窥探jQuery的整体架构: 分析一:无 ...

  10. SSO单点登录设计

    关键字: 单点登录 SSO Session 单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用,而在架构单点登录时,也会遇到一些小问题,在不同的应用环境中可以采用 ...