【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. 【19.05%】【codeforces 731F】 Video Cards

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

  2. 再议指针---------函数回调（qsort函数原理）

    我们是否能写一个这种函数: 能够对不论什么类型数据排序 不论什么人在使用该函数不须要改动该函数代码(即:用户能够不必看到函数源 码,仅仅会调用即可) 思考: 用户须要排序的数据的类型千变万化,可能是i ...

  3. CUDA查询和选取设备信息

    CUDA查询设备信息 CUDA C中的cudaGetDeviceProperties函数可以很方便的获取到设备的信息,函数原型是: cudaError_t CUDARTAPI cudaGetDevic ...

  4. Android开发中如何加载API源码帮助开发

    在eclipse中添加android源码既可以帮助我们的开发,又能使我们边开发边学习. android环境的搭建:http://blog.csdn.net/dawanganban/article/de ...

  5. 1-6 WebAPI基础和演示项目搭建

    启动项目的时候 在控制台用dotnet MsgService.dll的方式启动. 在program.cs文件下做如下修改: 实现在控制台 自定义ip和端口,修改之后有将项目重新生成,在控制台启动项目, ...

  6. java socket 的参数选项解读

    java socket中有很多参数可以选择,这篇博客的目的是沉淀出这些参数的语义和用法,供自己以后查阅. 1.java socket参数选项总览 在JDK1.6中有如下参数选项: public fin ...

  7. [Gevent]gevent 网络抓取问答

    我听说过gevent基于事件的异步处理功能 如何高效率,该项目已很少使用,今天是没什么学习一些简单的使用. 有正式书面一个非常好的教程 中国版的地址:http://xlambda.com/gevent ...

  8. Linking different libraries for Debug and Release builds in Cmake on windows?

    问题叙述性说明: So I've got a library I'm compiling and I need to link different third party things in depe ...

  9. ArcGIS Runtime SDK for WPF 初始化

    安装包 管理nuget包 Esri.ArcGISRuntime.WPF 也许还需要 Esri.ArcGISRuntime.Hydrography Esri.ArcGISRuntime.LocalSer ...

  10. jquery通过索引获取元素

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...