【canvas】基础练习三 图片
【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】基础练习三 图片的更多相关文章
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...
- canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
- canvas API ，通俗的canvas基础知识（一）
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- 这回真的是挤时间了-PHP基础（三）
hi 刚看了唐人街探案,5星好评啊亲.由于是早就约好的,也不好推辞(虽然是和男的..),但该写的还是得挤时间写.明天早上老师的项目结题,虽然和我关系不大,但不要添乱就好!! 1.PHP 一.PHP基 ...
- canvas 基础知识整理（二）
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- canvas 基础知识
canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
随机推荐
- maven hadoop 3.x HADOOP_HOME and hadoop.home.dir are unset Not implemented by the WebHdfsFileSystem FileSystem implementation
具体异常如下: 解决方案: 删除pom文件中的hadoop-core的依赖,原因:hadoop-core是1.x的产物,在2.x之后已经被hadoop-common取代,我配置的时候同时使用了这两个依 ...
- 【28.57%】【codeforces 615C】 Running Track
time limit per test1 second memory limit per test512 megabytes inputstandard input outputstandard ou ...
- ASP.NET Core框架的本质
源文章地址:http://www.cnblogs.com/artech/p/inside-asp-net-core-framework.html 1.从Hello World谈起 当我们最开始学习一门 ...
- Android framework召回（3）binder使用和IBinder BpRefbase IInterface INTERFACE 之间的关系
status_t AudioSystem::setStreamVolumeIndex(audio_stream_type_t stream, int index, audio_devices_t de ...
- WPF XAML中 Storyboard.TargetProperty设置TransformGroup指定的变换"RenderTransform.Children
<Grid x:Name="xx" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransfor ...
- Sublime text追踪函数插件：ctags[转载]
一.下载(择其一即可): 1)http://ctags.sourceforge.net/ 2)http://prdownloads.sourceforge.net/ctags/ 解压后单独取出ctag ...
- vs2015 cordova环境安装
原文:vs2015 cordova环境安装 1.参照其他高手的来 http://www.songker.com/index.php/post/151.html VS2015安卓开发Apache Cor ...
- 图像滤镜艺术---挤压(Pinch)滤镜
原文:图像滤镜艺术---挤压(Pinch)滤镜 Pinch滤镜 Pinch滤镜是通过坐标变换来实现以某个点(cenX,cenY)为中心,某个半径R内图像向其挤压变形的效果.实现这个滤镜的算法很多,主要 ...
- Central Subscriber Model Explained
原文 http://www.sqlrepl.com/sql-server/central-subscriber-model-explained/ The majority of SQL Server ...
- .NET框架中系列专业技术术语和缩写
CIL (Common Intermediate Language) 公共中间语言 : CIL最初是随着.NET由微软一起发布的,之前也叫MSIL(Microsoft Intermediate Lan ...