【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. DAX的圈圈大坑：循环依赖关系错误circular dependency （单表篇）

    使用DAX中的某些函数特别类似Calculate这种函数创建计算列时很容易出现一种错误,叫做检测到循环依赖关系,即:A circular dependency was detected.对于刚接触Da ...

  2. Android开发者的演示工具——asm.jar

    作为Android开发者,我们有时候需要给客户或者其他人演示我们的Android作品.我们可以使用类似豌豆荚.360手机助手这样的软件,今天我来介绍一个Android开发者的演示工具--asm.jar ...

  3. 数字电路基本概念 —— fan-in/fan-out

    0. 从模拟电路到数字电路 数字电路抗干扰能力强: 模拟电路会随着信号的传输而放大,这是因为模拟电路中信号几乎完全将真实信号按比例表现为电压或者电流的形式: 模拟电路是数字电路的基础 74LS283 ...

  4. javascript中间AJAX

    兼容访问XMLHttpRequest物: var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = window.XMLHttpRequest ...

  5. Android真机调试不打印日志解决

    1.在拨号界面输入:*#*#2846579#*#* 进入测试菜单界面. 2.Project Menu–后台设置–LOG设置 3.LOG开关–LOG打开 LOG级别设置–VERBOSE 4.Dump&a ...

  6. vue-router设置页面标题

    通过vue-router设置页面标题 const router = new Router({ routes: [ { path: '/', name: 'EntryConfirmation', met ...

  7. REST = HTTP动词（GET POST PUT DELETE）操作 + 服务器暴露资源URI，最后返回状态码（充分利用HTTP自身的特征，而不仅仅是把HTTP当作传输协议。Rest协议是面向资源的，SOAP是面向服务的），表现形式可以是JSON XML BIN，举例很清楚

    好处是,操作系统或者浏览器,可以重复利用它们内置的缓存机制等等. 增删改查都是一个地址,具体靠http头部信息判断. 利用HTTP协议语义构建的语义化.可缓存的接口. URL定位资源,用HTTP动词( ...

  8. 向西项目管理工具Git一片

    前言 Git 这个词相信大家并不陌生,做开发的童鞋们每天都离不开它.当然,假设你的项目中没实用到分布式,那么,你可能从未用过 Git,当然也可能没听过.只是,这不是重点,重点是这一篇文章,我们将一起谈 ...

  9. 狄利克雷过程（Dirichlet Process）

    0. 引入 现观察得到两个样本 θ1,θ2,来推测它们可能来自的分布: 假设来自于连续型概率密度函数, θ1,θ2∼H(θ) 则 θ1,θ2 相等的概率为 0,p(θ1=θ2)=0 概率为 0,不代表 ...

  10. WPF之VLC流媒体播放

    原文:WPF之VLC流媒体播放 最近在做关于在WPF使用VLC流媒体播放的问题,现在可以在WPF中实现VLC本地播放了,流播放解决了,在下面的代码中注释流媒体播放那两段代码,更多的在乎大家摸索了^^, ...