【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. vue 一些webpack的配置详解

    最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...

  2. Delphi中预编译指令

    本文转自 http://www.cnblogs.com/JackSun/archive/2010/12/20/1911250.html <Delphi下深入Windows核心编程>(附录A ...

  3. 三星260亿美元的豪赌：想垄断DRAM和NAND闪存市场（规模经济让对手难以招架）

    腾讯科技讯 据外媒报道,经过50年的发展,半导体市场仍然显得非常活跃,它在今年有望增长20%.随着高增长而来的是供应短缺,这就是DRAM和闪存价格为什么今年会上涨的原因. 三星在DRAM和闪存市场占有 ...

  4. 大约laravel错误的解决方案

    2015-3-13 夜晚 9:13 执行laravel发生错误Indirect modification of overloaded element of BbsArticle has no effe ...

  5. C#实现进程内存信息获取

    using System.Collections.Generic;using System.Runtime.InteropServices;using System;using System.Diag ...

  6. 在运行Hfile的MR如果任务client结束OOM

    在运行MR将HDFS转换成HFile什么时候.例如,会发生以下的异常: 14/07/09 18:02:59 INFO mapred.JobClient:  map 83% reduce 0% 14/0 ...

  7. win7(64bit)使用mingw64配置gtkmm

    因为linux命令不熟悉,加上时间不充裕,仍然决定在win7_64bit下开发GUI程序,选择gtkmm是因为: 1. 在图形界面程序中,windows系统当之无愧GUI之王,用户友好性其他OS无法替 ...

  8. C 语言main 函数终极探秘（&& 的含义是：如果 && 前面的程序正常退出，则继续执行 && 后面的程序，否则不执行）

           所有的C程序必须定义一个称之为main的外部函数,这个函数是程序的入口,也就是当程序启动时所执行的第一个函数,当这个函数返回时,程序也将终止,并且这个函数的返回值被看成是程序成功或失败的 ...

  9. PostgreSQL9.3：JSON 功能增强 根据PQ中文论坛francs 给出的东西结合自己的摸索总结下

     在 PostgreSQL 9.2 版本中已经支持 JSON 类型,不过支持的操作非常有限,仅支持以下函数   array_to_json(anyarray [, pretty_bool]) row_ ...

  10. Layui 2.0.0 正式发布：潜心之作，开箱即用的前端UI框架（确实很多内容）

    Hi,久违了.处暑逼近之际,潜水半年的 layui 是时候出来透透气了.我们带来的是全新的 2.0 版本,一次被我们定义为“破茧重生”的倾情之作.如果你已曾用过 layui,你将真正感受到一次因小而大 ...