【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. webcollector + selenium 爬取空间相册图片

    package cn.hb.util; import java.io.File; import java.io.FileNotFoundException; import java.io.FileWr ...

  2. 【16.67%】【codeforces 667C】Reberland Linguistics

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. 利用navicat写mysql的存储过程

    最近项目经理让我给新的活动的预留一个插入红包和查看详情的sql,方便在项目出问题的做一些紧急操作,我想了下这里面还涉及到挺多逻辑和挺多表的一句句查也不方便啊,干脆写到存储过程里,于是开始在navica ...

  4. 前端后端分离，怎么解决SEO优化的问题呢？

    对于90%以上的互联网公司来说,前后端分离是必须要做的.目前接手的公司的一个工程,后端是PHP,用的smarty模板,开发效率和之前公司的完全分离相比,确实低不少,一方面需要前端会PHP,另一方面沟通 ...

  5. Linux的设备文件名与硬盘分区已经挂载点的关系

    以CentOS6.3为例. 选择的硬盘设备名是/dev/sda,即第一块STAT硬盘,然后在该硬盘分了3个主分区和1个扩展分区,设备名分别是/dev/sda1,/dev/sda2,/dev/sda3, ...

  6. LoadFromStr的使用中出现错误“未结束的字符串常量”

    最近遇到个奇怪的问题,就是关于js参数中待换行符时,出现了错误“为结束的字符串常量”. 解决方法是:不直接将该数据以参数形式传递,而是先将其赋值在一个隐藏的文本内,需要调用的函数里只需读取该文本里的内 ...

  7. cordova打包之android应用签名

    原文:cordova打包之android应用签名 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mate_ge/article/details/78 ...

  8. Linux经常使用的命令(两) - cd

    Linux cd 命令能够说是Linux中最主要的命令语句,其它的命令语句要进行操作,都是建立在使用 cd 命令上的.所以,学习Linux 经常使用命令.首先就要学好 cd 命令的用法技巧. 1. 命 ...

  9. 转载来自朱小厮博客的 一文看懂Kafka消息格式的演变

    转载来自朱小厮博客的 一文看懂Kafka消息格式的演变     ✎摘要 对于一个成熟的消息中间件而言,消息格式不仅关系到功能维度的扩展,还牵涉到性能维度的优化.随着Kafka的迅猛发展,其消息格式也在 ...

  10. LeetCode总结 -- 树结构的一部分

    这篇总结主要介绍树中比較常见的一类题型--树的构造.事实上本质还是用递归的手法来实现,可是这类题目有一个特点.就是它是构建一棵树.而不是给定一棵树,然后进行遍历,所以实现起来思路上有点逆向,还是要练习 ...