【canvas】Demo1 scale缩放

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图片</title>

</head>

<body>

<canvas id="wapper" width="1000" height="1000"></canvas>

<script>

var wapper = document.getElementById('wapper'),

	_2d = wapper.getContext('2d');/*2d的绘制对象*/

var logo = new Image();

logo.src = 'http://icon.xgo-img.com.cn/mainpage/20150226/logo_07.jpg';

logo.onload = function (){

	_2d.drawImage(this, 5, 5);/*drawImage(img,x,y)*/

	_2d.scale(1, 1);

	_2d.drawImage(this, 200, 5);/*drawImage(img,x,y)*/

	_2d.scale(2,2);

	_2d.drawImage(this, 0, 50);/*drawImage(img,x,y)*/

	_2d.scale(0.2,0.2);

	_2d.drawImage(this, 0, 800);/*drawImage(img,x,y)*/

}

</script>

</body>

</html>

　　

【canvas】Demo2 translate移动

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图片</title>

</head>

<body>

<canvas id="wapper" width="1000" height="1000"></canvas>

<script>

var wapper = document.getElementById('wapper'),

	_2d = wapper.getContext('2d');/*2d的绘制对象*/

_2d.fillRect(10,10,100,50);

_2d.translate(70,70);

_2d.fillRect(10,10,100,50);

</script>

</body>

</html>

　　

【canvas】Demo3 rotate旋转

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>rotate</title>

</head>

<body>

<canvas id="wapper" width="1000" height="1000"></canvas>

<script>

var wapper = document.getElementById('wapper'),

	_2d = wapper.getContext('2d');/*2d的绘制对象*/

_2d.fillRect(50,50,100,50);

_2d.rotate(10*Math.PI/180);/*以画布0.0为中心的旋转*/

_2d.fillRect(50,50,100,50);

</script>

</body>

</html>

　　

【canvas】高级功能一 变形的更多相关文章

  1. 【高级功能】使用canvas元素（第二部分）

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  2. Xen之初体验：XenMotion、 StorageMotion、Site Recovery、Power Management 各种新、高级功能免费

    Xenserver 的新版本6.2现在已经全面开源,省掉了原有的序列号,也能免费体验曾经标题中的付费高级功能. 安装镜像:http://downloadns.citrix.com.edgesuite. ...

  3. MVC5 Entity Framework学习之Entity Framework高级功能(转)

    在之前的文章中,你已经学习了如何实现每个层次结构一个表继承.本节中你将学习使用Entity Framework Code First来开发ASP.NET web应用程序时可以利用的高级功能. 在本节中 ...

  4. C#高级功能（四）扩展方法和索引

    扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用.扩展方法被定义为静态方法,但 ...

  5. C#高级功能（三）Action、Func，Tuple

    Action和Func泛型委托实际上就是一个.NET Framework预定义的委托,3.5引入的特性.基本涵盖了所有常用的委托,所以一般不用用户重新声明. Action系列泛型委托,是没有返回参数的 ...

  6. C#高级功能（二）LINQ 和Enumerable类

    介绍LINQ之前先介绍一下枚举器 Iterator:枚举器如果你正在创建一个表现和行为都类似于集合的类,允许类的用户使用foreach语句对集合中的成员进行枚举将会是很方便的.我们将以创建一个简单化的 ...

  7. C#高级功能（一）Lambda 表达式

    Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数. Lambda 表达式对于编写 LINQ ...

  8. iOS开发——UI篇Swift篇&玩转UItableView（二）高级功能

    UItableView高级功能 class UITableViewControllerAF: UIViewController, UITableViewDataSource, UITableViewD ...

  9. delphi实现ado的高级功能

    ADO是Microsoft存取通用数据源的标准引擎.ADO通过封装OLE DB而能够存取不同类型的数据,让应用程序能很方便地通过统一的接口处理各种数据库.ADO由一组COM对象组成,每一个不同的原生A ...

随机推荐

  1. selenium firefox 提取qq空间相册链接

    环境: selenium-java 3.9.1 firefox 57.0 geckodriver 0.19.1 1.大概的思路就是模拟用户点击行为,关于滚动条的问题,我是模拟下拉箭头,否则只能每个相册 ...

  2. hadoop 3.x Replication与Availability不一致

    看下面的文字前先确保你的Replication值不大于你设置的虚拟机数量 如图,显示的副本数为3,但是实际可用的只有一台机器,查看了下hadoop003,hadoop004两台机器,果然没有存储数据, ...

  3. CommonJS里module.exports与exports输出模块的区别

    其实是一个东西,但有些注意点,可以参考CommonJS规范

  4. Struts2——（2）配置文件、通配符

    一.Struts配置文件 (1)struts-default.xml(框架自带) 定义了一些框架自带的Result组件,拦截器组件. <package name="struts-def ...

  5. eclipes 常用的快捷键 ， 修改字体

    内容辅助键  Alt+/ 自动补齐main方法  main 然后 Alt+/ 自动补齐输出语句  syso 然后 Alt+/ 格式化Ctrl+Shift+f 代码区域右键 -- Source – Fo ...

  6. eclipse中让关闭的项目不再显示

  7. Java编程思想学习笔记-使用显式的Lock对象

    若要保证后台线程在trylock()之前运行得到锁,可加“屏障”,如下1,2,3步,而trylock()不管设定时间与否都不会阻塞主线程而是立即返回: //: concurrency/AttemptL ...

  8. 用acharengine作Android图表

    首先要下载acharengine的包,里面重要的有lib和一些简易的工具,等下我附在文件夹里,而这些包都必须调用的. 然后以下附上主要的作图代码: package org.achartengine.c ...

  9. vcl控件经常使用属性和方法

    TTabControl属性 DisplayRect:仅仅定该控件客户区的一个矩形 HotTrack:设置当鼠标经过页标签时,它的字是否有变化.假设为True,是字会变成蓝色Images:为每一个页标签 ...

  10. Windows系统时间(FILETIME和SYSTEMTIME)

    转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8654298 欢迎关注微博:http://weibo.com/MoreWi ...