【canvas】Demo1 drawImage

drawImage(img,x,y);

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图片</title>

</head>

<body>

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

<script>

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

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

var logo = new Image();

logo.src = 'http://www.baidu.com/img/bd_logo1.png';

logo.onload = function (){

	_2d.drawImage(this, 0, 0);

}

</script>

</body>

</html>　

【canvas】Demo2 drawImage

drawImage(img,x,y)

drawImage(img,x,y,w,h)

drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图片</title>

</head>

<body>

<canvas id="wapper" width="500" height="500"></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, 0, 0);/*drawImage(img,x,y)*/

	_2d.drawImage(this, 300, 0, 100, 100);/*drawImage(img,x,y,w,h)*/

	_2d.drawImage(this, 50, 50,100,100,0,200,100,100);/*drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)*/

}

</script>

</body>

</html>

　

【canvas】Demo3 getImageData putImageData createImageData

getImageData获取图片上的一部分数据

putImageData绘制获取图片上的数据

createImageData创建新像素

目前没有找到这三个方法的优点，暂不示例。　

【canvas】基础练习三 图片的更多相关文章

  1. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  2. canvas基础之旅

    canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

  3. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  4. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  5. 这回真的是挤时间了-PHP基础（三）

    hi 刚看了唐人街探案,5星好评啊亲.由于是早就约好的,也不好推辞(虽然是和男的..),但该写的还是得挤时间写.明天早上老师的项目结题,虽然和我关系不大,但不要添乱就好!! 1.PHP  一.PHP基 ...

  6. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  7. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  8. canvas 基础知识

    canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...

  9. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

随机推荐

  1. Video processing systems and methods

    BACKGROUND The present invention relates to video processing systems. Advances in imaging technology ...

  2. Eclipse使用技巧总结（四）——代码重构专题

    二十四.重命名 这样重命名就方便多了,不需要一个一个去改了 二十五.移动类和方法 二十六.改变方法 二十七.转换匿名内部类到外部 二十八.提取接口 二十九.抽取成单独方法: Refactor--> ...

  3. Entity Framework知识小总结

    什么是Entity Framework EF是微软主推的数据存取技术,在实际开发中,现在通常使用EF来构建应用程序的数据存取层,它是一个开源的“对象/关系映射(ORM:Object Relationa ...

  4. Android的DDMS中的Threads的各个字段的含义

    在使用DDMS调试代码时,Threads窗口中各个字段的含义从网上搜了下,如下所示: 该标签页显示了如下信息: ID – a VM-assigned unique thread ID. In Dalv ...

  5. LockWindowUpdate的函数的用法

    Application.ProcessMessages;LockWindowUpdate(Self.Handle); //锁住当前窗口 LockWindowUpdate(0)//解除锁定窗口 Lock ...

  6. ude—基于udp的全双工可靠传输协议

    ude是一款基于udp的可靠传输协议,专门用于在数据传输方面对实时性要求较高的应用领域.    tcp协议虽然能保证数据的可靠传输,但它有以下几个缺点:1.tcp的数据确认机制会导致发送方重复发送一些 ...

  7. python 教程 第七章、 数据结构

    Python中有三种内建的数据结构——列表.元组和字典. 1)    Lists列表 [,] 列表是序列的一种 shoplist = ['apple', 'carrot', 'banana'] pri ...

  8. 大约PCA算法学习总结

    文章来源:http://blog.csdn.net/xizhibei ============================= PCA,也就是说,PrincipalComponents Analys ...

  9. 关于 Swift 2.0 - 语言新特性与革新

    随着刚刚结束的 WWDC 2015 苹果发布了一系列更新,这其中就包括了令人振奋的 Swift 2.0. 这是对之前语言特性的一次大幅的更新,加入了很多实用和方便的元素,下面我们就一起来看看这次更新都 ...

  10. vagrant up default: Warning: Authentication failure. Retrying...的一些解决办法

    vagrant up default: Warning: Authentication failure. Retrying...的一些解决办法 一般看到这个信息时,虚拟机已经启动成功,可以中断命令后v ...