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. docker-compose v3版本命令详解参考

    参考和指南 这些主题描述了Compose文件格式的第3版.这是最新的版本. Compose and Docker 兼容性矩阵 有几个版本的Compose文件格式 - 1,2,2.x和3.x.下表是快速 ...

  2. php接入支付宝的流程

    php接入支付宝的流程写在这里供像我一样的小白参考. 1.首先要有一个创建一个应用(选好自己想要的功能,关于支付的功能,貌似都需要签约) 2.下载SDK&Dome(网址https://doc. ...

  3. CenterOS 7 基础命令学习

    CentOS 7 命令 网络配置 nmcli(NetworkManageCommandLineInterface)查看网卡 nmtui(NetworkManageTextUserInterface)网 ...

  4. ibv_get_device_name()函数

    const char *ibv_get_device_name(struct ibv_device *device); 描述 函数用来获取一个与RDMA设备相关联的名字 注意 这个名字在一台特定的机器 ...

  5. 初识CSS

    css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...

  6. idea从git上拉取并管理项目

    1:idea从git上拉取项目 (1)FILE --> New --> Project from Version Control --> Git (2):输入项目的Https SSH ...

  7. Android自定义processor实现bindView功能

    一.简介 在现阶段的Android开发中,注解越来越流行起来,比如ButterKnife,Retrofit,Dragger,EventBus等等都选择使用注解来配置.按照处理时期,注解又分为两种类型, ...

  8. python爬虫(五)_urllib2:Get请求和Post请求

    本篇将介绍urllib2的Get和Post方法,更多内容请参考:python学习指南 urllib2默认只支持HTTP/HTTPS的GET和POST方法 urllib.urlencode() urll ...

  9. vue-cli 安装失败Failed to download repo vuejs-templates/webapck-simple: Response code 404 (Not Found)

    新学习vue的萌新们经常会遇到各种各样的坑.例如上面这个报错.这个一般是命令行面板写错单词导致. 正确:vue init webpack-simple .(注意"."点,指当前目录 ...

  10. java集合框架07——Map架构与源代码分析

    前几节我们对Collection以及Collection中的List部分进行了分析,Collection中还有个Set,因为Set是基于Map实现的,所以这里我们先分析Map,后面章节再继续学习Set ...