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. Python开发目录

    Python开发目录 Python之三目运算符 Python之文件的基本操作

  2. 企业级监控zabbix基础

    一个标准的监控系统所具备的基本功能: 1.数据的采集 2.为了展示其长期走势,将数据存储下来 3.万一某次采样的结果不在被认为是合理的范围内,然后就会做出告警操作,尽早的让相关人员得知到此消息 4.展 ...

  3. python_day05(去爬登录的豆瓣)

    # 爬豆瓣需要用cookie# 需要注意隐藏的参数,即input 里面的默认的一些参数# 需要自己注册一个账户密码import urllib.requestimport http.cookiejarf ...

  4. 51Nod--1018排序

    1018 排序 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出N个整数,对着N个整数进行排序 Input 第1行:整数的数量N(1 <= N  ...

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

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

  6. SpringData 基于SpringBoot快速入门

    SpringData 基于SpringBoot快速入门 本章通过学习SpringData 和SpringBoot 相关知识将面向服务架构(SOA)的单点登录系统(SSO)需要的代码实现.这样可以从实战 ...

  7. 初学sheel脚本练习过程

    以下是初学sheel脚本练习过程,涉及到内容的输出.基本的计算.条件判断(if.case).循环控制.数组的定义和使用.函数定义和使用 sheel脚本内容: #! /bin/bashecho &quo ...

  8. Java代码操作SVN

    package com.leadbank.oprPlatform.util;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import ...

  9. JDBC详解系列（二）之加载驱动

    ---[来自我的CSDN博客](http://blog.csdn.net/weixin_37139197/article/details/78838091)---   在JDBC详解系列(一)之流程中 ...

  10. Loadrunner 中socket协议RecvBuffer接收到数据长度为空

    socket通讯,有两种方式,一种是建立长连接(TCP),建立后,不停的发送,接收.另外一种是建立短连接(UDP),建立连接,发送报文,接收响应,关闭连接.两种方式 server的开销不同. 今天出现 ...