代码:

 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. xpath中如何使用变量

    xpath (python)xpath中如何使用变量描述: 在xpath中该如何使用变量,想选择id是某个值的元素,这个值是个变量. response.xpath('//div[@id=val]'). ...

  2. Windows平台下搭建Git服务器的图文教程(转发)

    Git没有客户端服务器端的概念,但是要共享Git仓库,就需要用到SSH协议(FTP , HTTPS , SFTP等协议也能实现Git共享,此文档不讨论),但是SSH有客户端服务器端,所以在window ...

  3. Data Structure Binary Tree: Diameter of a Binary Tree

    http://www.geeksforgeeks.org/diameter-of-a-binary-tree/ #include <iostream> #include <vecto ...

  4. 【leetcode刷题笔记】Rotate List

    Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...

  5. Redis高级进阶(二)

    一.消息通知 在一些网站上,经常会有一些发布/订阅或者邮件订阅的功能,尤其一些博客上.其实这种问题很常见,当页面需要进行如发送邮件.复杂的计算时会阻塞页面的渲染.为了避免用户等待太久,应该使用其他进程 ...

  6. CentOS7 + Python3 + Django(rest_framework) + MySQL + nginx + uwsgi 部署 API 开发环境, 记坑篇

    CentOS7 + Python3 + Django(rest_framework) + MySQL + nginx + uwsgi 部署 API 开发环境 CentOS7 + Python3 + D ...

  7. java入门了解之快捷键

    IDE(Integrated Development Environment ): 集成开发环境,集合开发.运行.调试于一体的一个软件 Eclipse 是一个开放源代码的.基于Java的可扩展开发平台 ...

  8. 本地文件读取(csv,txt)时字符编码问题解决

    今天进行csv文件读取时,老是入库为空,因为其中有中文字符,我要通过中文字符映射成相应的编号(上升:1011,下降:1012),于是怎么也取不到编号.刚开始以为程序映射出了问题,最后日志打出来后,发现 ...

  9. CSS3制作分步注册表单

    这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...

  10. Codeforces 914C Travelling Salesman and Special Numbers:数位dp

    题目链接:http://codeforces.com/problemset/problem/914/C 题意: 对数字x进行一次操作,可以将数字x变为x在二进制下1的个数. 显然,一个正整数在进行了若 ...