<!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. boost锁的使用

    boost锁的概述 boost库中提供了mutex类与lock类,通过组合可以轻易的构建读写锁与互斥锁. ▲     mutex对象类 mutex类提供互斥量,主要有两种:boost::mutex,b ...

  2. springMVC和spring上下文的关系

    springMVC继承了spring的servletcontext上下文, 所以, controller里的@Resource注入可以用以下替代 @Resource private IUserServ ...

  3. makefile里有哪些target?

    make help or grep ^[a-z].*\:$ Makefile | sed s,:,,g

  4. windows矢量字体点阵数据的提取(转)

    源:windows矢量字体点阵数据的提取 问题参考:windows api 获取字库点阵的问题 1.提取原理 在windows系统当中提取矢量字体的字模有很多方法,下面介绍一种利用GetGlyphOu ...

  5. 控制流（swift）

    检测API是否可用 if #available(iOS 9, OSX 10.10, *) { // 在 iOS 使用 iOS 9 APIs , 并且在 OS X 使用 OS X v10.10 APIs ...

  6. Spring第一个例子的补充

    1.首先导入需要的包: 2.文件结构: 3.先看xml配置文件: <?xml version="1.0" encoding="UTF-8"?> &l ...

  7. UNITY3D中的文件存储管理

    使用Path对象判断路径的完整性和正确性 using System; using System.IO; class Test { public static void Main() { string ...

  8. HDU 5650 so easy

    n不为1的时候输出a[1],否则输出0 #include<cstdio> #include<cstring> #include<cmath> #include< ...

  9. with补充知识点

    import threading,queue,time import contextlib @contextlib.contextmanager def fun(list_1,val): list_1 ...

  10. Android之layout_weight属性详解

    博文:http://www.cnblogs.com/net168/p/4227144.html讲分非常好,推荐下