<!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. 首页布局时div的宽度设置要注意

  2. git 与 github基本使用

    这里只对git 与 github的基本使用介绍,对于简单的步骤不做详细的说明,可以在网上搜索 一.git与github的安装与链接 1.git 安装:百度搜索"git",下载安装即 ...

  3. Linux的iptables常用配置范例（2）

    iptables -F   #清除所有规则 iptables -X  #清除所有自定义规则 iptables -Z   #各项计数归零 iptables -P INPUT DROP  #将input链 ...

  4. perties类的操作

    http://www.cnblogs.com/bakari/p/3562244.html perties类的操作   知识学而不用,就等于没用,到真正用到的时候还得重新再学.最近在看几款开源模拟器的源 ...

  5. hibernate---一对一单向主键关联(不重要)

    比如, husband的id参考wife的id husband.java: package com.bjsxt.hibernate; import javax.persistence.Entity; ...

  6. Android 4.0 ICS SystemUI浅析——StatusBar结构分析

    Android 4.0 ICS SystemUI浅析——StatusBar结构分析 分类: Android2012-06-30 14:45 23687人阅读 评论(8) 收藏 举报 androidsi ...

  7. CI如何在子目录下可以设置默认控制器

    CI建立大型大型的应用程序,需要创建子文件夹在application/controllers下建立文件夹app1app1目录下有多个控制器,ca.php,cb.php我希望定义app1下的默认控制器, ...

  8. PHP 安装 redis、memcached、openssl、pdo_mysql等

        PHP openssl 扩展的安装 这些插件可以通过在 php.ini 中添加 extension 的方式来加载所需要的插件,其实在 php 的安装包里就已经有相关的插件代码包了,在 php7 ...

  9. libconfig第二篇----两个小例子

    本文只看粗体即可,太多catch语句.两个例子均来自libconfig包的example文件夹下面,. 例子一: #include <iostream> #include <ioma ...

  10. 鸽笼原理的运用HDU1205

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 题目解析:开始没看清题,WA了一发,以为只要最大的次大的差2就是NO,后来仔细看过之后才发现,, ...