【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. 【非常高%】【codeforces 733A】Grasshopper And the String

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

  2. VirtualBox虚拟机网络环境Host-Only（对Win10和VirtualBox都有截图）

    之前在选择配置虚拟机网络环境的时候 桥接也是不错的,但是自己在使用的时候由于访问频繁会出现断网现象.所以就开始使用Host-Only模式.开始并不是很明白为什么这么设置,也挖了很多坑.经常出现虚拟机无 ...

  3. boost::bind应用示例

    // testBind.cpp : Defines the entry point for the console application. // #include "stdafx.h&qu ...

  4. ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程，简单编程

    原文:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程总结 ASP.NET Core 基础教程总算是有了个简单 ...

  5. WPF范围选择控件（RangeSelector）

    原文:WPF范围选择控件(RangeSelector) 版权声明:本文为博主原创文章,转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/art ...

  6. WPF 呼吸灯特效

    原文:WPF 呼吸灯特效 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014117094/article/details/46738621 pa ...

  7. Headless Chrome入门

    原文地址:Getting Started with Headless Chrome  By EricBidelman  Engineer @ Google working on web tooling ...

  8. UVA 10869 - Brownie Points II(树阵)

    UVA 10869 - Brownie Points II 题目链接 题意:平面上n个点,两个人,第一个人先选一条经过点的垂直x轴的线.然后还有一个人在这条线上穿过的点选一点作垂直该直线的线,然后划分 ...

  9. C# 获取系统Icon、获取文件相关的Icon

    原文:C# 获取系统Icon.获取文件相关的Icon 1.获取系统Icon工具下载SystemIcon.exe using System; using System.Collections.Gener ...

  10. Convert和RelativeSource

    自定义Converter 后台Converter类实现接口IValueConverter方法Convert是值->UI方法ConvertBack是UI->值初始化走Convert publ ...