1.加载显示图片

    <canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvasOne');
var ctx = canvas.getContext('2d');
//加载图片
var img = new Image();
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = '../images/1.jpg';
</script>

2.获取Canvas数据,显示到img标签

    <canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<img id="imgOne" />
<script>
var canvas = document.getElementById('canvasOne');
var ctx = canvas.getContext('2d');
//加载图片,显示当前图片到其他地方
var img = new Image();
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
//显示图片的部分内容到img图片标签
var imgOne = document.getElementById('imgOne');
imgOne.width = 1000;
imgOne.height = 600;
//图片内容显示当前画布显示的部分
imgOne.src = canvas.toDataURL('image/png');
}
img.src = '../images/1.jpg';
</script>

3.获取Canvas数据,显示到其他canvas中

    <canvas id="target" width="200" height="100"></canvas>
<canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvasOne');
var ctx = canvas.getContext('2d');
var target = document.getElementById('target');
//加载图片
var img = new Image();
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//图片缩小,显示
ctx.scale(0.5, 0.5);
ctx.drawImage(img, 0, 0, img.width, img.height); //获取缩小后的像素,显示到其他canvas
var imgData = ctx.getImageData(0, 0, 200, 100);
var ctxTwo = target.getContext('2d');
ctxTwo.putImageData(imgData, 0, 0);
}
img.src = '../images/1.jpg';
</script>

4.Canvas中图片的平铺操作

    <canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<script>
/***图片的背景显示***/
var canvas = document.getElementById('canvasOne');
var ctx = canvas.getContext('2d');
//加载图片
var img = new Image();
img.onload = function () {
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.scale(0.1, 0.1);
//平铺
//ctx.fillStyle = ctx.createPattern(img, 'repeat'); //水平方向 平铺
//ctx.fillStyle = ctx.createPattern(img,'repeat-x'); //垂直方向 平铺
//ctx.fillStyle = ctx.createPattern(img, 'repeat-y'); //禁用平铺
ctx.fillStyle = ctx.createPattern(img, 'no-repeat'); ctx.fill();
}
img.src = '../images/1.jpg';
</script>

更多像素处理:

http://www.cnblogs.com/tianma3798/p/4264857.html

HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1

HTML5 Canvas图片操作简单实例1的更多相关文章

  1. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  2. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  3. mysqli数据库操作简单实例

    mysqli数据库操作简单实例 代码 结果

  4. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  5. [译]怎样用HTML5 Canvas制作一个简单的游戏

    这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...

  6. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  7. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  8. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  9. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 用Spring Boot零配置快速创建web项目(1)

    一.Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人 ...

  2. 13 hbase连接

    Configuration conf=new Configuration(); String zookeeper=""; String clientport="; Str ...

  3. Oracle 错误码

    Oracle作为一款比较优秀同时也比较难以掌握的大型数据库,在我们学习使用的过程中,不可避免的会遇到一些错误,为此 Oracle 给出了一套完备的错误消息提示机制 我们可以根据Oracle给出的消息提 ...

  4. Oracle数据库之PL/SQL程序设计简介

    PL/SQL程序设计简介 一.什么是PL/SQL? PL/SQL是 Procedure Language & Structured Query Language 的缩写. ORACLE的SQL ...

  5. 使用 phpMyAdmin无法登录mysql的问题

    今天使用使用phpmyadmin时出现了以下错误: (1)第一次时: 当配置文件config.inc.php里的配置项是: $cfg['Servers'][$i]['host'] = 'localho ...

  6. CLR via C#字符串和文本处理

    一.字符   在.NET Framewole中,字符总是表示成16位Unicode代码值,这简化了国际化应用程序的开发.   每个字符都表示成System.Char结构(一个值类型) 的一个实例.Sy ...

  7. JAVA - 多线程的同步

    多线程的同步 1. 锁对象. 应用场景:当某个数据可能被其他线程修改时,给涉及到数据的方法上锁,保证同一时刻只有拥有这个锁的线程能访问该数据,其他要调用这个方法的线程被阻塞.注意:必须是不同线程访问同 ...

  8. Android 使用Post方式提交数据(登录)

    在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...

  9. Java 截取反斜杠--java使用split拆分特殊字符

    Java 截取反斜杠 replaceAll和split (“\”) 问题解决办法 xxx.split("\\") 显然得不到想要的结果 正确方法 xxx.split("\ ...

  10. CSS3: box-sizing 属性的简单认识

    定义和用法: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 默认值:content-box; 继承性:无: css版本:css3 语法:box-sizing: conten ...