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. vuejs(2.0)基础笔记

    基本结构 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#wrap', data ...

  2. 使用Maven Archetype插件构建Maven工程原型模板

    创建原型模板 1.在空目录运行archetype:generate上面的命令,待下载完必要的jar包后,首先需要输入内置的原型编号: 1 Choose archetype: 2 1: internal ...

  3. Libevent(2.1.8)中的事件结构和管理

    Libevent(2.1.8)中的事件结构体 这里的libevent版本为 2.1.8 . libevent中事件的结构体struct event,定义在event_struct.h 中, 这里我们简 ...

  4. 实用的jQuery技巧

    1.回到顶部按钮  利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. // Back to top $('.top').click(functi ...

  5. 5、C#基础 - C#的值类型

    1.C#的值类型 有几个特点: 存储在栈里 基于值类型的变量直接包含值(值类型存储实际值). 将一个值类型变量赋给另一个值类型变量时,将复制包含的值. 这与引用类型变量的赋值不同,引用类型变量的赋值只 ...

  6. Gitlab一键端的安装汉化及问题解决(2017/12/14目前版本为10.2.4)

    Gitlab的安装汉化及问题解决 一.前言 Gitlab需要安装的包太TM多了,源码安装能愁死个人,一直出错,后来发现几行命令就装的真是遇到的新大陆一样... ... 装完之后感觉太简单,加了汉化补丁 ...

  7. Netty之粘包分包

    粘包现象 客户端在一个for循环内连续发送1000个hello给Netty服务器端, Socket socket = new Socket("127.0.0.1", 10101); ...

  8. javascript设计模式——中介者模式

    前面的话 程序由大大小小的单一对象组成,所有这些对象都按照某种关系和规则来通信.当程序的规模增大,对象会越来越多,它们之间的关系也越来越复杂,难免会形成网状的交叉引用.当改变或删除其中一个对象的时候, ...

  9. Redis的简单使用和介绍

    1.什么是NoSQL     NoSQL   =   Not Only  SQL     非关系型的数据库      2. 为什么需要NoSQL     High performance  高并发读写 ...

  10. applicaitonContext属性未注入, 请在applicationContext.xml中定义SpringContextHolder.

    我用的jeesite框架,在使用定时任务时,出现一些问题,,1.在windows上项目可以在tomcat下,运行2.在linux下项目在tomcatgh下,却出现问题: 15-Dec-2017 15: ...