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/
随机推荐
- xpath中如何使用变量
xpath (python)xpath中如何使用变量描述: 在xpath中该如何使用变量,想选择id是某个值的元素,这个值是个变量. response.xpath('//div[@id=val]'). ...
- Windows平台下搭建Git服务器的图文教程(转发)
Git没有客户端服务器端的概念,但是要共享Git仓库,就需要用到SSH协议(FTP , HTTPS , SFTP等协议也能实现Git共享,此文档不讨论),但是SSH有客户端服务器端,所以在window ...
- Data Structure Binary Tree: Diameter of a Binary Tree
http://www.geeksforgeeks.org/diameter-of-a-binary-tree/ #include <iostream> #include <vecto ...
- 【leetcode刷题笔记】Rotate List
Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...
- Redis高级进阶(二)
一.消息通知 在一些网站上,经常会有一些发布/订阅或者邮件订阅的功能,尤其一些博客上.其实这种问题很常见,当页面需要进行如发送邮件.复杂的计算时会阻塞页面的渲染.为了避免用户等待太久,应该使用其他进程 ...
- CentOS7 + Python3 + Django(rest_framework) + MySQL + nginx + uwsgi 部署 API 开发环境, 记坑篇
CentOS7 + Python3 + Django(rest_framework) + MySQL + nginx + uwsgi 部署 API 开发环境 CentOS7 + Python3 + D ...
- java入门了解之快捷键
IDE(Integrated Development Environment ): 集成开发环境,集合开发.运行.调试于一体的一个软件 Eclipse 是一个开放源代码的.基于Java的可扩展开发平台 ...
- 本地文件读取(csv,txt)时字符编码问题解决
今天进行csv文件读取时,老是入库为空,因为其中有中文字符,我要通过中文字符映射成相应的编号(上升:1011,下降:1012),于是怎么也取不到编号.刚开始以为程序映射出了问题,最后日志打出来后,发现 ...
- CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
- Codeforces 914C Travelling Salesman and Special Numbers:数位dp
题目链接:http://codeforces.com/problemset/problem/914/C 题意: 对数字x进行一次操作,可以将数字x变为x在二进制下1的个数. 显然,一个正整数在进行了若 ...