代码:

 1 /**
2 * Created by Administrator on 2016/1/30.
3 */
4 function draw (id){
5 var canvas = document.getElementById(id);
6 var context = canvas.getContext('2d');
7 /* context.translate(200,120);//偏移量
8 context.rotate(Math.PI/6);//旋转
9 context.scale(0.6,0.4);//缩放或扩大*/
10 context.transform(1,0.5,10,1,1,0);
11 context.fillStyle = "red";
12 context.fillRect(0,0,100,100);
13 // ArcFace(context);
14 }
15 /*
16 function ArcFace(context){
17 // 绘制脸型
18 context.beginPath();
19 context.lineWidth = 5;
20 context.strokeStyle = "red";
21 context.arc(0,0,90,0,Math.PI*2,true);
22 context.stroke();
23 //绘制五官
24 context.beginPath();
25 //左眼
26 context.moveTo(-30,-30);
27 context.lineTo(-30,-20);
28 //右眼
29 context.moveTo(30,-30);
30 context.lineTo(30,-20);
31 //嘴
32 context.moveTo(-20,30);
33 context.bezierCurveTo(-20,44,20,30,30,20);
34 //颜色设定
35 context.strokeStyle = "red";
36 context.lineWidth = 10;
37 context.lineCap = "round";
38 context.stroke();
39 }*/

移动方法为translate();

  格式:

    translate(dx,dy):

      dx:水平方向上的偏移量,dy:垂直方向上的偏移量。

  说明:添加偏移量后,会将偏移量附加给后续的所有坐标点。

     如果需要调整图像的位置,只需调整坐标的偏移量就可以了,不用再在新的位置重新绘图,很直观的实现了图像的移动。

缩放(放大)方法为scale();

  格式:

    scale(sx,sy):

      sx:水平方向上的缩放因子,

          sy:垂直方向上的缩放因子。

  说明:sx,sy为大于零的数值。当其值大于1时,为放大图像;小于1时,为缩放图像。

旋转方法为rotate();

  格式:

    rotate(angle);

      angle为角度。

  说明:angle为正值时表示顺时针旋转,负值表示逆时针旋转。旋转的中心点为坐标系统的原点。

另外还有方法transform(),其格式为transform(a,b,c,d,e,f);它是全能的。

canvas变换(移动,缩放等)的更多相关文章

  1. 【转】android Graphics(四):canvas变换与操作

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

  2. android Graphics(四):canvas变换与操作

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

  3. canvas变换

    canvas变换 方法 save() 保存canvas状态 restore() 回复canvas保存的状态 translate(x, y) 移动canvas位置 rotate(radians) 顺时针 ...

  4. canvas 鼠标位置缩放图形

    最近再做 webcad , 需要在 canvas  上对图形进行缩放,主要分为以下几个步骤: 1.找到当前光标所在位置,确定其在相对 canvas 坐标系的坐标 绑定鼠标滚轮事件,假定每次缩放比例 0 ...

  5. 用DirectX实现魔方(三)视角变换及缩放(附源码)

    在本系列第一篇介绍过鼠标按键的功能,如下. 左键拖拽 - 旋转魔方 右键拖拽 - 变换视角 滚轮 - 缩放魔方 今天研究一下如何实现后面两个功能,用到的技术主要是Arcball,Arcball是实现M ...

  6. 自定义控件之canvas变换和裁剪

    1.平移 //构造两个画笔,一个红色,一个绿色 Paint paint_green = generatePaint(Color.GREEN, Paint.Style.STROKE, 3); Paint ...

  7. 如何获取canvas当前的缩放值

    项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为5像素,那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px,所以再绘制时赋值给c ...

  8. FLASH CC 2015 CANVAS 导出图片出现缩放问题

    最近有项目 没时间更新教程 刚才出现一个问题 就是导出动画后,发现有图片无故被缩放(与软件内的设置不一样) 经过排查 发现动画师 直接将位图 进行了缩放, 导出后出现问题 把文图转换为影片剪辑后,做缩 ...

  9. 自定义控件之绘图篇(四):canvas变换与操作

    具体操作见下面链接: http://blog.csdn.net/harvic880925/article/details/39080931/

随机推荐

  1. activiti--4----------------------------------流程变量

    一.流程变量的作用 1.用来传递业务参数 2.指定连线完成任务(同意或拒绝) 3.动态指定任务办理人 二.测试代码块 Person类 package com.xingshang.processVari ...

  2. Java实现时间日期格式转换示例

    package com.hanqi.util; import java.text.ParseException; import java.text.SimpleDateFormat; import j ...

  3. Excel控制IE

    ---恢复内容开始--- 1.初始化and连接http网页 Set ie = CreateObject("InternetExplorer.Application") ie.Vis ...

  4. spring 注解事务

    前提:在applicationContext.xml中配置<tx:annotation-driven transaction-manager="transactionManager&q ...

  5. 牛客小白月赛1 F 三视图 【循环】

    题目链接 https://www.nowcoder.com/acm/contest/85/F 思路 记录每一个面 上的点 是否有方块 然后 根据它的输出顺序 遍历访问 如果有 输出 'X' 否则 输出 ...

  6. python 3 模块

    python3 模块 一 .模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. import加载的模块分为四个通用类别: 1 ...

  7. 95th percentile concentration

    很多网络流量监控软件都提供了一个95th的值,开始一直不太理解,终于在solarwinds官网找到答案. 95th百分点指的是所给数集中超过其95%的数.它是一个统计学上的概念.对于某个接口,准确统计 ...

  8. nc命令用法

    root@10.1.1.43:~# nc -h[v1.10-38]connect to somewhere: nc [-options] hostname port[s] [ports] ... li ...

  9. 改进地图的vo类

    现在的地图只是各帧特征点的集合.创建地图:局部,全局.局部:只相机位置附近的特征点,用来和当前帧匹配求解相机位置的.全局:不定位,回环检测和地图表达.重点或麻烦:维护局部地图的规模.为了实时,保证地图 ...

  10. HDU 2736 Surprising Strings

                                    Surprising Strings Time Limit:1000MS     Memory Limit:65536KB     64 ...