安科网

HTML5 canvas做的一个图片局部放大的效果

hixiaoyang

hixiaoyang

2012-01-27

关注 关注

看到老外做HTML5的越来越多了,今天看到一个其中用HTML5做的效果不错, 是在canvas上画的圈,做放大器,并且监视了鼠标的相关事件,代码如下:

HTML部分

  1. <!DOCTYPE html>   
  2. <html lang="en" >   
    <head>           <meta charset="utf-8" />           <title>HTML5 canvas - Image zoomer | muu.cc</title>           <link href="css/main.css" rel="stylesheet" type="text/css" />           <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>           <script type="text/javascript" src="js/script.js"></script>       </head>       <body>           <div class="container">               <canvas id="panel" width="800" height="533"></canvas>           </div>           <footer>               <h2>HTML5 canvas - Image zoomer</h2>               <a href="http://www.muu.cc" class="stuts">Back to original MUU.cc on <span>MUU CC</span></a>         </footer>       </body>   </html>  

CSS部分:

  1. *{   
  2.     margin:0;   
  3.     padding:0;   
  4. }   
  5.   
  6. body {   
  7.     background-color:#bababa;   
  8.     color:#fff;   
  9.     font:14px/1.3 Arial,sans-serif;   
  10. }   
  11.   
  12. footer {   
  13.     background-color:#212121;   
  14.     bottom:0;   
  15.     box-shadow: 0 -1px 2px #111111;   
  16.     display:block;   
  17.     height:70px;   
  18.     left:0;   
  19.     position:fixed;   
  20.     width:100%;   
  21.     z-index:100;   
  22. }   
  23.   
  24. footer h2{   
  25.     font-size:22px;   
  26.     font-weight:normal;   
  27.     left:50%;   
  28.     margin-left:-400px;   
  29.     padding:22px 0;   
  30.     position:absolute;   
  31.     width:540px;   
  32. }   
  33.   
  34. footer a.stuts,a.stuts:visited{   
  35.     border:none;   
  36.     text-decoration:none;   
  37.     color:#fcfcfc;   
  38.     font-size:14px;   
  39.     left:50%;   
  40.     line-height:31px;   
  41.     margin:23px 0 0 110px;   
  42.     position:absolute;   
  43.     top:0;   
  44. }   
  45.   
  46. footer .stuts span {   
  47.     font-size:22px;   
  48.     font-weight:bold;   
  49.     margin-left:5px;   
  50. }   
  51.   
  52. .container {   
  53.     color:#000;   
  54.     margin:20px auto;   
  55.     position:relative;   
  56.     width:800px;   
  57. }   
  58.   
  59. #panel {   
  60.     border:1px #000 solid;   
  61.     box-shadow:4px 6px 6px #444444;   
  62.     cursor:crosshair;   
  63. }  

script.js

  1. // variables   
  2. var canvas, ctx;   
  3. var image;   
  4. var iMouseX, iMouseY = 1;   
  5. var bMouseDown = false;   
  6. var iZoomRadius = 100;   
  7. var iZoomPower = 2;   
  8.   
  9. // drawing functions   
  10. function clear() { // clear canvas function   
  11.     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);   
  12. }   
  13.   
  14. function drawScene() { // main drawScene function   
  15.     clear(); // clear canvas   
  16.   
  17.     if (bMouseDown) { // drawing zoom area   
  18.         ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);   
  19.         ctx.globalCompositeOperation = 'destination-atop';   
  20.   
  21.         var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);   
  22.         oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");   
  23.         oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");   
  24.         ctx.fillStyle = oGrd;   
  25.         ctx.beginPath();   
  26.         ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);   
  27.         ctx.closePath();   
  28.         ctx.fill();   
  29.     }   
  30.   
  31.     // draw source image   
  32.     ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);   
  33. }   
  34.   
  35. $(function(){   
  36.     // loading source image   
  37.     image = new Image();   
  38.     image.onload = function () {   
  39.     }   
  40.     image.src = 'images/image.jpg';   
  41.   
  42.     // creating canvas object   
  43.     canvas = document.getElementById('panel');   
  44.     ctx = canvas.getContext('2d');   
  45.   
  46.     $('#panel').mousemove(function(e) { // mouse move handler   
  47.         var canvasOffset = $(canvas).offset();   
  48.         iMouseX = Math.floor(e.pageX - canvasOffset.left);   
  49.         iMouseY = Math.floor(e.pageY - canvasOffset.top);   
  50.     });   
  51.   
  52.     $('#panel').mousedown(function(e) { // binding mousedown event   
  53.         bMouseDown = true;   
  54.     });   
  55.   
  56.     $('#panel').mouseup(function(e) { // binding mouseup event   
  57.         bMouseDown = false;   
  58.     });   
  59.   
  60.     setInterval(drawScene, 30); // loop drawScene   
  61. });   

一个在线效果在:  

http://www.muu.cc/html5/Imagezoomer/index.html

要用chrome,firefox,safri等浏览器看 

 

 

 

 

 

 

 

 

 

 

 

html5 font string canvas

hixiaoyang

hixiaoyang

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Canvas

Canvas是HTML5新增的一个双标签，目的在页面设置一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。<canvas wi

nercon 2020-03-06

基于 HTML5 Canvas 的 3D 热力云图效果

数据蕴藏价值，但数据的价值需要用IT技术去发现、探索，可视化可以帮助人更好的去分析数据，信息的质量很大程度上依赖于其呈现方式。在数据分析上，热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到3D热力图的效果展示。大楼内的人员分

zsh 2020-03-01

一篇文章带你了解HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 ... 。MathML 是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的

wusiye 2020-10-23

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn 2020-08-09

HTML 5 &lt;input&gt; 标签

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。在 HTML 4.01 中，"align" 属性已被废弃，HTM

nercon 2020-08-01

HTML5的新语义和新结构元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，

swiftwwj 2020-07-21

HTML5中修改表单验证默认提示语句

HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的

nercon 2020-07-16

indexedDB 数据库_html5中Web离线数据库的使用

在html5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL数据库，它可以存储大量的数据。web Storage可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明

饮马天涯 2020-07-05

[Javascript] HTML5 DOM project

<p>You have <span class="todos-count"></span> items</p>. <button type="button" cl

Lophole 2020-06-28

Html5—— &lt;input&gt; autocomplete 属性

autocomplete 属性是 HTML5 中的新属性。autocomplete 属性规定输入字段是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。即，当你输入过一次，提交后，下次再点击输入框时，会

gufudhn 2020-06-12

疯狂HTML5 CSS 3 JavaScript讲义 (李刚) 高清PDF扫描版 279M完整版下载

《疯狂html 5/css 3/javascript讲义》的定位是一本前端开发的“实战性”图书，因此在介绍各知识点时并不是简单地停留在知识点层面阐述，而是结合了大量实例来让读者对照练习、学以致用。该游戏综合运用了html 5的绘图支持、客户端存储等技术，具

csstpeixun 2020-06-11

Vue.Js（html5） + Java实现文件分片上传

代码从项目中剥离修改，未经测试，仅提供思路。let bufferLength = 1024 * 1024 * 5;需要注意的是，Blob.slice,文件块包含start指向的字节，而不包含end指向的字节，在使用时要注意Blob的边界。使用ByteBuf

huzijia 2020-06-09

[JavaScript] HTML5 播放hls流媒体视频流

PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放

WebVincent 2020-06-06

html5 video视频，本地环境好的，线上环境，不能播放

本地环境ok，发布到线上不能播放。之前看这个视频，把video放在public文件夹下的。

niehanmin 2020-06-03

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为。<source src="./media/snow.ogg" type="audio.mpeg&

行吟阁 2020-05-30

HTML5中History.back()页面后退刷新页面

在开发中经常会遇到在一个页面操作完返回上一个页面，此时要求上个页面展示最新数据的需求。　　返回了A1页面同时A1页面进行了刷新！

qsdnet我想学编程 2020-05-26

分享一些酷酷的特效，希望你也能够喜欢

id=ha200bcjbb畜牧资讯官方app页面模板。新闻资讯手机模板html下载。id=ha202bhcib简单的手机绑定银行卡页面，手机添加银行卡信息列页面模板 。id=ha2bh01a2jcss3 Animation属性制作夜晚的景色搭配悬浮发光圆点

gufudhn 2020-05-25

这些例子很炫，感兴趣的童鞋可以了解一下

id=kja1abajb黑色通用的网络品牌设计公司介绍html5单页模板，广告品牌设计公司网站单页模板。echarts中国地图城市区块选择代码点击》echarts中国地图城市区块选择代码html5基于echarts.js地图插件制作中国地图点击选择城市弹出

qsdnet我想学编程 2020-05-19

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程，了解更多数据

suixinsuoyu 2020-05-15

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件允许网页获得来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。创建一个新的 EventSource 对象，然后规定发送更新的

HSdiana 2020-05-15
hixiaoyang

hixiaoyang

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号