drawImage方法

context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)

sx\sy起始图像的横纵坐标，sh\sd起始图像的大小，dx\dy复制图像的横纵坐标，dw\dy复制图像的大小

下面我们用这个属性来做一个点击局部放大效果

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<script type="text/javascript" src="js/jquery.js"></script>

	<script type="text/javascript">

	    var context;

	    var canvas;

	    var iMouseX, iMouseY = 1;

	    var image;

	   //绘制区域

	    window.onload = function() {

	    	function draw(id){

	    	    canvas = document.getElementById(id);

	    	    if(canvas == null)

	    		    return false;

	    	    context = canvas.getContext('2d');

	    	    context.fillStyle = "#eeeeff";

	    	    context.fillRect(0,0,400,300);

	    	    //一边装载，一边绘制

	    	    image = new Image();

	    	    image.src = "img/2.png";

	    	    image.onload = function() {

	    		    drawImg(context,image);

	    	    };

	        }

	        //将原始图片添加到网页上

	        function drawImg(context,image) {

	    	            context.drawImage(image,0,0,100,100);

	        }

	        draw('canvas');

         //点击原始图片放大事件

        canvas.onclick = function(e) {//监听鼠标动作

           iMouseX = Math.floor(e.pageX);

           iMouseY = Math.floor(e.pageY)-82;

           context.drawImage(image,iMouseX,iMouseY,57,80,110,0,200,200);

        }

        }

	</script>

</head>

<body>

    <h1>canvas元素示例</h1>

    <canvas id="canvas" width="400" height="300" ></canvas>

</body>

</html>

用HTML5和原生js实现放大局部图片的更多相关文章

  1. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

  2. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. 原生js实现多组图片切换

    这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...

  5. 原生Js封装的产品图片360度展示

    挺简单的一段程序,但是效果不错: 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览:http://jsfiddle.n ...

  6. 原生js可视加载图片、延迟加载、懒加载

    <script> //既视加载//var oBtn = document.getElementsByTagName('button')[0];var aImages = document. ...

  7. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  8. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  9. 用HTML5+原生js实现的推箱子游戏

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

随机推荐

  1. OC的特有语法-分类Category、 类的本质、description方法、SEL、NSLog输出增强、点语法、变量作用域、@property @synthesize关键字、Id、OC语言构造方法

    一. 分类-Category 1. 基本用途:Category  分类是OC特有的语言,依赖于类. ➢ 如何在不改变原来类模型的前提下,给类扩充一些方法?有2种方式 ● 继承 ● 分类(Categor ...

  2. azure上连续部署web

    连续部署web   连续部署web,可以在第一次部署完web应用后,方便修改和自动提交代码部署新版本的web应用.其中自动提交使用github中的webhook,使代码在master上提交修改后可以自 ...

  3. 翻译连载 | 附录 B: 谦虚的 Monad－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  4. 32位linux（centos）下mongoDB的安装

    下载mongoDB wget http://downloads.mongodb.org/linux/mongodb-linux-i686-2.4.9.tgz 如果上面地址不对可以去官网自己下载http ...

  5. Java并发编程总结4——ConcurrentHashMap在jdk1.8中的改进

    一.简单回顾ConcurrentHashMap在jdk1.7中的设计 先简单看下ConcurrentHashMap类在jdk1.7中的设计,其基本结构如图所示: 每一个segment都是一个HashE ...

  6. vs 2015工具栏添加Tab Order

    1. 在工具栏右键,弹出菜单,选中“Customize”菜单项. 2. 选中Commands标签页,选择Toolbar,选择自己要加入的Tab order的类别,之后点击“Add Command”按钮 ...

  7. How to support comparators in our sort implementations?

    上图是普林斯顿算法课part1.Mergesort章节给出的参考代码,可以发现这个代码有三处警告.造成的隐患就是我们无法在类型检查时发现送入sort()函数的数组元素类型和Comparator的泛型不 ...

  8. 使用hiredis实现pipeline方式访问

    1.介绍 hiredis: 一个c/c++的访问redis的api库 地址:https://github.com/redis/hiredis pipeline方式: redis中的pipeline方式 ...

  9. Mysql的管理及使用

    第1章 Mysql的管理 1.1 连接管理mysql mysql[options] #Linux或UNIX shell提示符(终端窗口) mysql --help #查看帮助信息 mysql --ve ...

  10. iKcamp团队制作｜基于Koa2搭建Node.js实战（含视频）☞ 中间件用法

    中间件用法--讲解 Koa2 中间件的用法及如何开发中间件