javascript座标_JavaScript 坐标换算函数的演示

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/*

Translates a number from one range to another.

Syntax

translate(value, start1, stop1, start2, stop2)

Parameters

valuefloat: the incoming value to be converted

start1float: lower bound of the value's current range

stop1float: upper bound of the value's current range

start2float: lower bound of the value's target range

stop2float: upper bound of the value's target range

Returnsfloat

*/

function translate(value, low1, high1, low2, high2) {

return low2 + (high2 - low2) * ((value - low1) / (high1 - low1));

}

console.log(translate(20, 0, 100, 0, 1));

const d = document;

const $c = d.querySelector('.circle');

const w = window;

d.addEventListener('mousemove', (e) => {

requestAnimationFrame(() => {

let scale = translate(e.pageY, 0, w.innerHeight, .2, 1.2);

let hue = translate(e.pageX, 0, w.innerWidth, 0, 360);

$c.style.transform = `translate(-50%,-50%) scale(${scale})`;

$c.style.backgroundColor = `hsl(${hue},100%,80%)`;

$c.style.boxShadow = `0 0 0 ${scale * 100}px hsl(${(hue + 180) % 360},100%,80%)`;

});

});