JavaScript图像放大镜效果实现方法详解
1. 基本四瓣花型图案
根据四瓣花卉线的参数方程：
t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);
x=t*cos(θ));
y=t*sin(θ));
编写如下的HTML文件。
<!DOCTYPE html>
<head>
<title>基本的四瓣花型图案</title>
<script type="text/javascript">
function draw(id)
{
var canvas = document.getElementById(
id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 320, 320);
context.strokeStyle = "blue";
context.lineWidth = 1;
var dig = Math.PI / 64;
context.beginPath();
for (var i = 0; i <= 128; i++)
{
d = 120 * (1 + Math.sin(12 * i *
dig) / 5);
t = d * (0.5 + Math.sin(4 * i * dig) /
2);
x = (160 + t * Math.cos(i * dig));
y = (160 + t * Math.sin(i * dig));
if (i == 0)
context.moveTo(x, y);
else
context.lineTo(x, y);
}
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="320" height="320"></canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的四瓣花卉线图案。
图1 四瓣花卉线图案
2．平铺的100朵四瓣花
用一个二重循环将图1的四瓣花卉绘制10行10列共100朵。编写的HTML文件内容如下。
<!DOCTYPE html>
<head>
<title>平铺的100朵四瓣花</title>
<script type="text/javascript">
function draw(id)
{
var canvas = document.getElementById(
id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 320, 320);
context.strokeStyle = "blue";
context.lineWidth = 1;
var dig = Math.PI / 64;
context.beginPath();
for (px = 20; px < 320; px += 30)
for (py = 20; py < 320; py += 30)
{
for (var i = 0; i <= 128; i++)
{
d = 20 * (1 + Math.sin(12 * i *
dig) / 5);
t = d * (0.5 + Math.sin(4 * i *
dig) / 2);
x = px + t * Math.cos(i * dig);
y = py + t * Math.sin(i * dig);
if (i == 0)
context.moveTo(x, y);
else
context.lineTo(x, y);
}
context.stroke();
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="320" height="320"></canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图2所示的平铺的100朵四瓣花卉图案。
图2 平铺的100朵四瓣花卉图案
3．放大镜看平铺的四瓣花
将图2图形中位于中心点周围100以内的点的坐标进行球面镜反射变换，可以实现放大镜效果。编写的HTML文件内容如下。
<!DOCTYPE html>
<head>
<title>球面镜反射变换</title>
<script type="text/javascript">
function draw(id)
{
var canvas = document.getElementById(
id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 320, 320);
context.strokeStyle = "blue";
context.lineWidth = 1;
var dig = Math.PI / 64;
context.beginPath();
var r = 140;
var x0 = 160;
var y0 = 160;
for (px = 20; px < 320; px += 30)
for (py = 20; py < 320; py += 30)
{
for (var i = 0; i <= 128; i++)
{
d = 20 * (1 + Math.sin(12 * i *
dig) / 5);
t = d * (0.5 + Math.sin(4 * i *
dig) / 2);
x = px + t * Math.cos(i * dig);
y = py + t * Math.sin(i * dig);
l = Math.sqrt((x - x0) * (x - x0) +
(y - y0) * (y - y0));
if (l < r)
{ // 圆心为（160,160），半径为140的圆内各点进行球面镜反射变换
s = x - x0 < 0 ? -1 : 1;
if (x - x0 == 0) x = x0 + 0.1;
bt = 2 * Math.atan(l / r);
th = Math.atan((y - y0) / (x - x0));
m = r * Math.sin(bt);
x = s * m * Math.cos(th) + x0;
y = s * m * Math.sin(th) + y0;
}
if (i == 0)
context.moveTo(x, y);
else
context.lineTo(x, y);
}
context.stroke();
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="320" height="320"></canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图3所示的图形放大镜效果1。
图3 图形放大镜效果1
上面程序中语句var r=140;、var x0=160;和var y0=160;用于设置放大镜的圆心坐标和半径。若修改r=100，x0=100，y0=100，则在画布中绘制出如图4所示的图形放大镜效果2。
图4 图形放大镜效果2
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript如何使用插值实现图像渐变
描述由一个图形变化为另一个图形过程中的各个中间图形,称为渐变图形.可以利用插值算法求得各个渐变图形. 设在源图形和目标图形上各取M个对应坐标点,并分别保存到数组中,源图形用数组SX[M]和SY[M]保存M个坐标点(sx,sy),目标图形用数组DX[M]和DY[M]保存M个坐标点(dx,dy).若需生成源图形变换到目标图形中的N-1个渐变图形,采用简单的线性插值可以编写如下的二重循环: for (k=1;k<N;k++) for (i=0;i<M;i++) { x=(dx[i]-sx[i])/N
-
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/
-
JavaScript实现的图像模糊算法代码分享
项目中需要用到HTML5模糊图像,以前用GDI,GDI+中都有现成的组件来实现,HTML5中如何实现?1.createImageData()2.getImageData()3.putImageData()以上3个函数即可实现,用法和奥义,自己百度吧,我就不重复叙述了,没多大的意义. 以下是实现模糊算法的JS,其实还有种2B级算法就是分布矩阵,这样效率提高很多倍,不过效果很差,羽化的效果不强.实现代码: 复制代码 代码如下: var mul_table = [ 512,512,456
-
JavaScript使用readAsDataURL读取图像文件
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件. 参考以下使用readAsDataURL读取图像文件
-
js canvas实现简单的图像扩散效果
本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> Your browser does not support the canv
-
JS在浏览器中解析Base64编码图像
上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝.下载而不用担心信息会缺失.这项技术也在email邮件中被广泛使用. 浏览器对Base64的支持 图像是最经常被使用的一种二进制文件.而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持.因此图形信息可以以下面的形式呈现在页面中. Java代码 <img src="data:im
-
JS对img标签进行优化使用onerror显示默认图像
对于网站图像的不显示有很多原因,网络问题,文件本身问题,文件URL问题等,而当图像加载失败时会触发onerror这个事件,我们利用这点,可以有效的避免图像加载失败的尴尬! js代码 复制代码 代码如下: //图像加载出错时的处理 function errorImg(img) { img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg"; img.
-
在Node.js中将SVG图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式的方法
介绍 你需要将SVG文件转换为PNG.JPEG.TIFF.WEBP 和 HEIF 格式吗?本文将指导你如何转换为所有这些类型的格式. 我们将使用 Node.js 和Sharpnpm 包来完成大部分繁重的工作. 目录 安装 Sharp Npm 包 SVG 转 PNG SVG 转 JPEG SVG 转 TIFF SVG 转 WEBP SVG 转 HEIF 安装Sharp Npm Package 首先你需要安装 npm 包.你可以使用下面的 npm 或 yarn 命令安装: Npm $ npm ins
-
JavaScript图像放大镜效果实现方法详解
1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML文件. <!DOCTYPE html> <head> <title>基本的四瓣花型图案</title> <script type="text/javascript"> function draw(id) { var canvas
-
js图片放大镜效果实现方法详解
由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{
-
Android Flutter实现GIF动画效果的方法详解
目录 前言 交错动画机制 代码实现 Interval 介绍 总结 前言 我们之前介绍了不少有关动画的篇章.前面介绍的动画都是只有一个动画效果,那如果我们想对某个组件实现一组动效,比如下面的效果,该怎么办? staggered animation 这个时候我们需要用到组合动效, Flutter 提供了交错动画(Staggered Animation)的方式实现.对于多个 Anmation 对象,可以共用一个 AnimationController,然后在不同的时间段执行动画效果.这就有点像 GIF
-
JavaScript数组排序reverse()和sort()方法详解
JavaScript中数组排序的方法有两个reverse()和sort(). reverse()方法会反转数组项的顺序: var arr = [1,2,3,4,5]; arr.reverse(); alert(arr); //5,4,3,2,1 sort()方法会按照字符串升序排列数组项,sort()方法会调用每个数组项的tostring()方法,即使数组中的每一项都是数值,sort()方法比较的也是字符串: var arr = [1,2,11,15,5]; arr.sort(); alert(
-
Jetpack Compose实现动画效果的方法详解
目录 概述 低级别动画API animate*AsState 使用Animatable实现颜色变化效果 使用updateTransition实现颜色和圆角动画 rememberInfiniteTransition TargetBasedAnimation 自定义动画 AnimationSpec Easing AnimationVector 高级动画 概述 compose 为支持动画提供了大量的 api,通过这些 api 我们可以轻松实现动画效果 ps:这些 api 的原理与 Flutter 很接
-
利用JavaScript获取用户IP属地方法详解
目录 写在前面 尝试一:navigator.geolocation 尝试二:sohu 的接口 尝试三:百度地图的接口 写在后面 写在前面 想要像一些平台那样显示用户的位置信息,例如某省市那样.那么这是如何做到的, 据说这个位置信息的准确性在通信网络运营商那里?先不管,先实践尝试下能不能获取. 尝试一:navigator.geolocation 尝试了使用 navigator.geolocation,但未能成功拿到信息. getGeolocation(){ if ('geolocation' in
-
微信小程序实现下拉刷新和上拉分页效果的方法详解
目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2
-
Android高级组件ImageSwitcher图像切换器使用方法详解
图像切换器(ImageSwitcher),用于实现类似于Windows操作系统的"Windows照片查看器"中的上一张.下一张切换图片的功能.在使用ImageSwitcher时,必须实现ViewSwitcher.ViewFactory接口,并通过makeView()方法来创建用于显示图片的ImageView.makeView()方法将返回一个显示图片的ImageView.在使用图像切换器时,还有一个方法非常重要,那就是setImageResource方法,该方法用于指定要在ImageS
-
JavaScript与HTML的结合方法详解
HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的<body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内. 一.<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>和</script>会告诉JavaScript
-
JS实现滑动门效果的方法详解
本文实例讲述了JS实现滑动门效果的方法.分享给大家供大家参考,具体如下: 描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌,效果图如下: 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未显露的部分) 3.绑定鼠标滑过事件 window.onload=function(){ var box=document.getElementById("box"); var img=box.getEl