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. 超级有用的Vim命令

    你是否曾经烦恼,每次编辑vim文件,想要跳到一行结尾,需要按多次右键,每次想找到某个字符的位置,都得用肉眼去观察,每次想跳到文件结尾,都要按多次向下键.现在,你不必担心这些繁杂的过程,因为我们完全可以 ...

  2. 树莓派远程桌面配置-开机自启SSH

    必须先安装tightvncserver sudo apt-get install tightvncserver 再安装xrdp服务. sudo apt-get install xrdp 如果开着防火墙 ...

  3. HBase表预分区与压缩

    1.建立HBase预分区表.sql语句如下: create 'buyer_calllogs_info_ts', 'record', {SPLITS_FILE => 'hbase_calllogs ...

  4. linux添加新硬盘并格式化

    1.查看当前系统硬盘及分区情况 (注:Linux中SCSI的第1个硬盘/dev/sda,第2个硬盘/dev/sdb依此类推) 2. 初始化分区sdb为物理卷pv pvcreate /dev/sdb   ...

  5. Aurora 论坛图片下载

    Aurora 论坛图片下载是一款快速下载指定网页图片的利器,还可以下载高清原图呢.现支持的网站:①蜂鸟网论坛②中关村摄影论坛③POCO摄影空间④图虫网其他摄影论坛陆续添加中... 效果图: 项目地址: ...

  6. 网页设计——5.table布局

    今天做一个大的页面,主要是对table布局的理解: 代码: <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" ...

  7. webpack loader加载器

    配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd c ...

  8. 使用TensorFlow实现DNN

    这一节使用TF实现一个多层神经网络模型来对MNIST数据集进行分类,这里我们设计一个含有两个隐藏层的神经网络,在输出部分使用softmax对结果进行预测. 使用高级API实现多层神经网络 这里我们使用 ...

  9. Docker笔记三：基于LVS DR模式构建WEB服务集群

    安装ipvsadm 1. 先在宿主机上安装并以root来启动ipvsadm,每次要在容器中运行ipvs都需要先在宿主机上启动ipvs.如果直接进行2步操作将报出如下错误: Can't initiali ...

  10. 如何使用 Secret？- 每天5分钟玩转 Docker 容器技术（108）

    我们经常要向容器传递敏感信息,最常见的莫过于密码了.比如: docker run -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql 在启动 MySQL 容器时我 ...