- 浏览: 7873405 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
看到老外做HTML5的越来越多了,今天看到一个其中用HTML5做的效果不错,
是在canvas上画的圈,做放大器,并且监视了鼠标的相关事件,代码如下:
HTML部分
CSS部分:
script.js
是在canvas上画的圈,做放大器,并且监视了鼠标的相关事件,代码如下:
HTML部分
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 canvas - Image zoomer | Script Tutorials</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> [url=http://www.script-tutorials.com/html5-canvas-image-zoomer/]Back to original tutorial on <span>Script Tutorials</span>[/url] </footer> </body> </html>
CSS部分:
*{ margin:0; padding:0; } body { background-color:#bababa; color:#fff; font:14px/1.3 Arial,sans-serif; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100; } footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { color:#000; margin:20px auto; position:relative; width:800px; } #panel { border:1px #000 solid; box-shadow:4px 6px 6px #444444; cursor:crosshair; }
script.js
// variables var canvas, ctx; var image; var iMouseX, iMouseY = 1; var bMouseDown = false; var iZoomRadius = 100; var iZoomPower = 2; // drawing functions function clear() { // clear canvas function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawScene() { // main drawScene function clear(); // clear canvas if (bMouseDown) { // drawing zoom area ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower); ctx.globalCompositeOperation = 'destination-atop'; var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius); oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)"); oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)"); ctx.fillStyle = oGrd; ctx.beginPath(); ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } // draw source image ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); } $(function(){ // loading source image image = new Image(); image.onload = function () { } image.src = 'images/image.jpg'; // creating canvas object canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); $('#panel').mousemove(function(e) { // mouse move handler var canvasOffset = $(canvas).offset(); iMouseX = Math.floor(e.pageX - canvasOffset.left); iMouseY = Math.floor(e.pageY - canvasOffset.top); }); $('#panel').mousedown(function(e) { // binding mousedown event bMouseDown = true; }); $('#panel').mouseup(function(e) { // binding mouseup event bMouseDown = false; }); setInterval(drawScene, 30); // loop drawScene }); 一个在线效果在: http://www.script-tutorials.com/demos/167/index.html 要用chrome,firefox,safri等浏览器看
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 772刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 493三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1504http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 780https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1666即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 971不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2988参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92791. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 614http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 822http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9641 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 560虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 531【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1396https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 788深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 921(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1123https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3134http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1533canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 538http://www.ruanyifeng.com/blog/ ...
相关推荐
html5 canvas自动绘制背景图片效果代码 html5 canvas自动绘制背景图片效果代码
HTML5 canvas商品图片360度旋转浏览效果,全视角查看效果。
html5 canvas拖动的流体图片动画效果
HTML5 Canvas实现的图片放大镜效果源码.zip
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
html5 canvas结合css分割图片 引用动画库animal等 播放图片动画 支持三角形 矩形 梯形 横向 竖向 支持火狐浏览器及手机
完美支持各个主流浏览器,chrome,火狐, ios ,android 微信等的浏览器。解决某些手机拍照 图片旋转问题,解决图片压缩问题。欢迎使用
这是一款基于html5的canvas技术实现的图片3d倒影效果源码,画面呈现出逼真的3d投影视觉效果,并且带有相册图片的正面与侧偏视觉效果,显得非常逼真、立体。
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
一个html5 canvas做的动画,效果是自动绘制一个网格
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
html5 canvas首屏自适应背景动画循环效果代码 html5 canvas首屏自适应背景动画循环效果代码
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。
首先有这么一个需求。需要前端根据后端传过来数据,动态的生成图片。图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
css3实现图片模糊,canvas实现交互设计,简单,简单,简单,简单,简单,简单单
前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单。今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,...
9种不同的图像和填充纹理图片效果,分别使用html5 svg,html5 canvas和css3背景技术完成,想学习的就来吧!
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果