【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. 【16.56%】【codeforces 687B】Remainders Game

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

  2. struts2和velocity整合问题

    以下是我第一次使用velocity的时候写的 2012-03-12 话说struts真够懒的,都把velocity-1.6.4.jar放到他自己的lib里边了,就不给放全了,搞得新手太郁闷了.stru ...

  3. Struts2——（4）OGNL与struts标签

    一.OGNL Object Graphic Navigation Language  对象图导航语言 依赖于 ognl.jar包 OGNL不是Struts框架独有的,它是和框架独立的一种技术. 例如: ...

  4. 【转】mybatis 一对一与一对多collection和association的使用

    转自:https://www.cnblogs.com/yansum/p/5819973.html (有修改和补充,红色字体部分)   在mybatis如何进行一对一.一对多的多表查询呢?这里用一个简单 ...

  5. vcl控件经常使用属性和方法

    TTabControl属性 DisplayRect:仅仅定该控件客户区的一个矩形 HotTrack:设置当鼠标经过页标签时,它的字是否有变化.假设为True,是字会变成蓝色Images:为每一个页标签 ...

  6. Linux（CentOS 7）+ Nginx（1.10.2）+ Mysql（5.7.16）+ PHP（7.0.12）完整环境搭建

    首先安装Linux系统,我以虚拟机安装来做示例,先去下载 VitualBox,这是一款开源的虚拟机软件,https://www.virtualbox.org 官网地址.或者是VMware,www.vm ...

  7. Myeclipse2014 激活 （包括方法和工具）

    课程要求Myeclipse做各种各样的实验,对,当各种插头井.突然Myeclipse提示:使用过期,你可知道按那些个插件收了多少挫折么,怎能刚安好就用不了.可是又不想buy,所以就上网找破解咯,当中发 ...

  8. SharePoint创建内容类型

    SharePoint创建内容类型 内容类型的用途是多种多样的.创建内容类型也非常简单. 1. 点击网站操作--网站设置. 2. 点击网站内容类型,点击创建. 3. 命名Beginning_ShareP ...

  9. C#使用Selenium实现QQ空间数据抓取 登录QQ空间

    经@吃西瓜的星星提醒 首先我们介绍下Selenium Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mo ...

  10. 静态资源(StaticResource)和动态资源(DynamicResource)

    一.文章概述 本演示介绍了WPF的静态资源和动态资源的基本使用,并对两者做了简单的比较. 二.定义并使用资源 <Window x:Class="Demo010.MainWindow&q ...