【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. Groovy&Gradle总结

    欢迎大家加入QQ群一起讨论: 489873144(android格调小窝) 我的github地址:https://github.com/jeasonlzy 0x01 Groovy 概述 Groovy ...

  2. 【27.48%】【codeforces 699D】 Fix a Tree

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  3. sql这两个表和查询的组合yii通过使用数据库查询

    sql两个表的组合查询  使用 join on 比如:两个表查询: select u.username, t.title from user u join task t on u.id = t.id; ...

  4. 【Struts2学习笔记（4）】指定需要Struts 2请求后缀的常量定义复杂的过程

    一.指定需要Struts 2请求后缀处理 我们是在违约前.action后缀访问Action. 事实上默认后缀是通过不断"struts.action.extension"进行更改.例 ...

  5. hudson搭建经验总结

    作者:朱金灿 来源:http://blog.csdn.net/clever101 hudson 是一种革命性的开放源码 CI (持续集成)服务器,随着工程源码越来越庞大,把源码编译工作放在本地机器已不 ...

  6. java中 8进制 10进制 2进制 16进制 相互转换

    十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinar ...

  7. win10 uwp 使用 asp dotnet core 做图床服务器客户端

    原文 win10 uwp 使用 asp dotnet core 做图床服务器客户端 本文告诉大家如何在 UWP 做客户端和 asp dotnet core 做服务器端来做一个图床工具   服务器端 从 ...

  8. NAT对于网络上的其它人都不可见（但可以转发端口），Bridged和网络里的其它物理机没区别，Internal只能在虚拟机之间可见，Host-only只对主机可见（最符合我的服务器需求），最多可设置8块网卡实现混杂

    VirtualBox 可以为每一个虚拟机分配8个网卡.每一个网卡的连接方式可以选为下列之一: Not attached Network Address Translation (NAT) Bridge ...

  9. WPF 3D 获取鼠标在场景的3d坐标

    原文:WPF 3D 获取鼠标在场景的3d坐标 上一篇中我们谈到了WPF 3d做图的一些简单原理,这里我们简单介绍一下怎样获得鼠标在场景中的3d坐标,知道了3d坐标就可以进行很多操作了: 首先介绍一下3 ...

  10. STL优先级队列

    priority_queue 这是一个优先级队列的所有权值概念单向队列queue.在这个队列中.全部元素是按优先级排列的(也能够觉得queue是个按进入队列的先后做为优先级的优先级队列--先进入队列的 ...