【canvas】高级功能一 变形
【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】高级功能一 变形的更多相关文章
- 【高级功能】使用canvas元素（第二部分）
本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...
- Xen之初体验：XenMotion、 StorageMotion、Site Recovery、Power Management 各种新、高级功能免费
Xenserver 的新版本6.2现在已经全面开源,省掉了原有的序列号,也能免费体验曾经标题中的付费高级功能. 安装镜像:http://downloadns.citrix.com.edgesuite. ...
- MVC5 Entity Framework学习之Entity Framework高级功能(转)
在之前的文章中,你已经学习了如何实现每个层次结构一个表继承.本节中你将学习使用Entity Framework Code First来开发ASP.NET web应用程序时可以利用的高级功能. 在本节中 ...
- C#高级功能（四）扩展方法和索引
扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用.扩展方法被定义为静态方法,但 ...
- C#高级功能（三）Action、Func，Tuple
Action和Func泛型委托实际上就是一个.NET Framework预定义的委托,3.5引入的特性.基本涵盖了所有常用的委托,所以一般不用用户重新声明. Action系列泛型委托,是没有返回参数的 ...
- C#高级功能（二）LINQ 和Enumerable类
介绍LINQ之前先介绍一下枚举器 Iterator:枚举器如果你正在创建一个表现和行为都类似于集合的类,允许类的用户使用foreach语句对集合中的成员进行枚举将会是很方便的.我们将以创建一个简单化的 ...
- C#高级功能（一）Lambda 表达式
Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数. Lambda 表达式对于编写 LINQ ...
- iOS开发——UI篇Swift篇&玩转UItableView（二）高级功能
UItableView高级功能 class UITableViewControllerAF: UIViewController, UITableViewDataSource, UITableViewD ...
- delphi实现ado的高级功能
ADO是Microsoft存取通用数据源的标准引擎.ADO通过封装OLE DB而能够存取不同类型的数据,让应用程序能很方便地通过统一的接口处理各种数据库.ADO由一组COM对象组成,每一个不同的原生A ...
随机推荐
- hibernate annotation 相关主键生成策略
Hibernate 默认的全面支持 13 物种生成策略 : 1. increment 2. identity 3. sequence 4. hilo 5. seqhilo 6. uuid 7. uu ...
- 利用WPF建立自己的3d gis软件（非axhost方式）（十一）SDK中的动画系统
原文:利用WPF建立自己的3d gis软件(非axhost方式)(十一)SDK中的动画系统 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew ...
- Sql 将多个表查询的结果进行再次查询
把你目前查到结果集定义为一个临时表 tempTable 下面是如何查 SELECT * FROM tempTable where 关键字=‘’举例 select book_num,book_name, ...
- phpcms视图查询数据
{pc:get sql="SELECT * FROM phpcms WHERE id in ($id) ORDER BY listorder ASC LIMIT 0, 1--"re ...
- .NET基础拾遗
原帖地址: http://www.cnblogs.com/edisonchou/p/4787775.html
- APP和服务端-架构设计(二)
1. App架构设计经验谈:接口的设计 App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉. 1.1 安全机制的设计 现在,大部分App的接口 ...
- Python算法(含源代码下载)
关键字:Python Algorithms Python算法 Mastering Basic Algorithms in the Python Language 使用Python语言掌握基本算法 P ...
- window7使用MinGW在命令行编译C/C++源程序（从零开始，设置PATH，LIBRARY_PATH，C_INCLUDE_PATH）
1.要想在window命令行下面编译C/C++源程序,对于初学者来说,需要在window环境下面配置好GCC和G++编译器,我使用的是MinGW,下载地址为:http://sourceforge.ne ...
- 机器学习: Python with Recurrent Neural Network
之前我们介绍了Recurrent neural network (RNN) 的原理: http://blog.csdn.net/matrix_space/article/details/5337404 ...
- 从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...