canvas变换(移动,缩放等)
代码:
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变换(移动,缩放等)的更多相关文章
- 【转】android Graphics(四):canvas变换与操作
android Graphics(四):canvas变换与操作 分类: 5.andriod开发2014-09-05 15:05 5877人阅读 评论(18) 收藏 举报 目录(?)[+] 前言 ...
- android Graphics(四):canvas变换与操作
前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清 ...
- canvas变换
canvas变换 方法 save() 保存canvas状态 restore() 回复canvas保存的状态 translate(x, y) 移动canvas位置 rotate(radians) 顺时针 ...
- canvas 鼠标位置缩放图形
最近再做 webcad , 需要在 canvas 上对图形进行缩放,主要分为以下几个步骤: 1.找到当前光标所在位置,确定其在相对 canvas 坐标系的坐标 绑定鼠标滚轮事件,假定每次缩放比例 0 ...
- 用DirectX实现魔方(三)视角变换及缩放(附源码)
在本系列第一篇介绍过鼠标按键的功能,如下. 左键拖拽 - 旋转魔方 右键拖拽 - 变换视角 滚轮 - 缩放魔方 今天研究一下如何实现后面两个功能,用到的技术主要是Arcball,Arcball是实现M ...
- 自定义控件之canvas变换和裁剪
1.平移 //构造两个画笔,一个红色,一个绿色 Paint paint_green = generatePaint(Color.GREEN, Paint.Style.STROKE, 3); Paint ...
- 如何获取canvas当前的缩放值
项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为5像素,那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px,所以再绘制时赋值给c ...
- FLASH CC 2015 CANVAS 导出图片出现缩放问题
最近有项目 没时间更新教程 刚才出现一个问题 就是导出动画后,发现有图片无故被缩放(与软件内的设置不一样) 经过排查 发现动画师 直接将位图 进行了缩放, 导出后出现问题 把文图转换为影片剪辑后,做缩 ...
- 自定义控件之绘图篇(四):canvas变换与操作
具体操作见下面链接: http://blog.csdn.net/harvic880925/article/details/39080931/
随机推荐
- activiti--4----------------------------------流程变量
一.流程变量的作用 1.用来传递业务参数 2.指定连线完成任务(同意或拒绝) 3.动态指定任务办理人 二.测试代码块 Person类 package com.xingshang.processVari ...
- Java实现时间日期格式转换示例
package com.hanqi.util; import java.text.ParseException; import java.text.SimpleDateFormat; import j ...
- Excel控制IE
---恢复内容开始--- 1.初始化and连接http网页 Set ie = CreateObject("InternetExplorer.Application") ie.Vis ...
- spring 注解事务
前提:在applicationContext.xml中配置<tx:annotation-driven transaction-manager="transactionManager&q ...
- 牛客小白月赛1 F 三视图 【循环】
题目链接 https://www.nowcoder.com/acm/contest/85/F 思路 记录每一个面 上的点 是否有方块 然后 根据它的输出顺序 遍历访问 如果有 输出 'X' 否则 输出 ...
- python 3 模块
python3 模块 一 .模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. import加载的模块分为四个通用类别: 1 ...
- 95th percentile concentration
很多网络流量监控软件都提供了一个95th的值,开始一直不太理解,终于在solarwinds官网找到答案. 95th百分点指的是所给数集中超过其95%的数.它是一个统计学上的概念.对于某个接口,准确统计 ...
- nc命令用法
root@10.1.1.43:~# nc -h[v1.10-38]connect to somewhere: nc [-options] hostname port[s] [ports] ... li ...
- 改进地图的vo类
现在的地图只是各帧特征点的集合.创建地图:局部,全局.局部:只相机位置附近的特征点,用来和当前帧匹配求解相机位置的.全局:不定位,回环检测和地图表达.重点或麻烦:维护局部地图的规模.为了实时,保证地图 ...
- HDU 2736 Surprising Strings
Surprising Strings Time Limit:1000MS Memory Limit:65536KB 64 ...