Javascript 如何调整大小到较小的圆
如何将两个圆的大小调整为更小？我复制了这个来源，但没有找到。这张画是用帆布画的。我尝试更改某些值，但结果不正确。 HTML：Javascript 如何调整大小到较小的圆,javascript,html,canvas,Javascript,Html,Canvas,如何将两个圆的大小调整为更小？我复制了这个来源，但没有找到。这张画是用帆布画的。我尝试更改某些值，但结果不正确。 HTML： <div style='position: absolute: top: 0px; left: 0px; background-color: #FFFFFF; width: 300px; height: 2000px'> <div id='mainDiv' style='position: absolute; width:
<div style='position: absolute: top: 0px; left: 0px; background-color: #FFFFFF; width: 300px; height: 2000px'>
<div id='mainDiv' style='position: absolute; width: 250px; height: 250px; visibility: hidden; cursor: pointer'>
<canvas id='g2'></canvas>
<canvas id='luminosity' width='250' height='250' style='position: absolute; left: 0px; top: 0px'></canvas>
<canvas id='hue-selector' width='15' height='15' style='position: absolute'></canvas>
<canvas id='luminosity-selector' width='15' height='15' style='position: absolute'></canvas>
</div>
</div>
<canvas id='selColor' width='15' height='15' style='position: absolute; border: 1px solid #000'></canvas>
$('#selColor').click(function(e) {
onMenuForegroundColor();
});
function HSB2RGB(j, d, c) {
var e, g, l, h, k, b, a, m;
if (c == 0) {
return [0, 0, 0]
}
j *= 0.016666667;
d *= 0.01;
c *= 0.01;
h = Math.floor(j);
k = j - h;
b = c * (1 - d);
a = c * (1 - (d * k));
m = c * (1 - (d * (1 - k)));
switch (h) {
case 0:
e = c;
g = m;
l = b;
break;
case 1:
e = a;
g = c;
l = b;
break;
case 2:
e = b;
g = c;
l = m;
break;
case 3:
e = b;
g = a;
l = c;
break;
case 4:
e = m;
g = b;
l = c;
break;
case 5:
e = c;
g = b;
l = a;
break
}
return [e, g, l]
}
function RGB2HSB(c, d, k) {
var j, h, e, g, b, a;
j = Math.min(Math.min(c, d), k);
a = Math.max(Math.max(c, d), k);
if (j == a) {
return [0, 0, a * 100]
}
h = (c == j) ? d - k : ((d == j) ? k - c : c - d);
e = (c == j) ? 3 : ((d == j) ? 5 : 1);
g = Math.floor((e - h / (a - j)) * 60) % 360;
b = Math.floor(((a - j) / a) * 100);
a = Math.floor(a * 100);
return [g, b, a]
}
function ColorSelector(a) {
this.init(a)
}
ColorSelector.prototype = {
container: null,
color: [0, 0, 0],
hueSelector: null,
luminosity: null,
luminosityData: null,
luminositySelector: null,
luminosityPosition: null,
dispatcher: null,
changeEvent: null,
init: function(k) {
var m = this,
b1, g2, d3;
this.container = document.getElementById('mainDiv')
this.container.addEventListener("mousedown", l, false);
this.container.addEventListener("touchstart", f, false);
g2 = document.getElementById('g2');
g2.width = k.width;
g2.height = k.height;
b1 = g2.getContext("2d");
b1.drawImage(k, 0, 0, g2.width, g2.height);
d3 = b1.getImageData(0, 0, g2.width, g2.height).data;
this.luminosity = document.getElementById('luminosity');
this.hueSelector = document.getElementById('hue-selector');
this.hueSelector.style.left = ((g2.width - 15) / 2) + "px";
this.hueSelector.style.top = ((g2.height - 15) / 2) + "px";
b1 = this.hueSelector.getContext("2d");
b1.lineWidth = 2;
b1.strokeStyle = "rgba(0, 0, 0, 0.5)";
b1.beginPath();
b1.arc(8, 8, 6, 0, Math.PI * 2, true);
b1.stroke();
b1.strokeStyle = "rgba(256, 256, 256, 0.8)";
b1.beginPath();
b1.arc(7, 7, 6, 0, Math.PI * 2, true);
b1.stroke();
this.luminosityPosition = [(k.width - 15), (k.height - 15) / 2];
this.luminositySelector = document.getElementById('luminosity-selector');
this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + "px";
this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + "px";
b1 = this.luminositySelector.getContext("2d");
b1.drawImage(this.hueSelector, 0, 0, this.luminositySelector.width, this.luminositySelector.height);
this.dispatcher = document.createElement("div");
this.changeEvent = document.createEvent("Events");
this.changeEvent.initEvent("change", true, true);
function l(n) {
window.addEventListener("mousemove", c, false);
window.addEventListener("mouseup", h, false);
e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
}
function c(n) {
e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
}
function h(n) {
window.removeEventListener("mousemove", c, false);
window.removeEventListener("mouseup", h, false);
e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
}
function f(n) {
if (n.touches.length == 1) {
n.preventDefault();
window.addEventListener("touchmove", a, false);
window.addEventListener("touchend", j, false);
e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
}
}
function a(n) {
if (n.touches.length == 1) {
n.preventDefault();
e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
}
}
function j(n) {
if (n.touches.length == 0) {
n.preventDefault();
window.removeEventListener("touchmove", a, false);
window.removeEventListener("touchend", j, false)
}
}
function e(o, t) {
var q, p, r, n, s;
q = o - 125;
p = t - 125;
r = Math.sqrt(q * q + p * p);
if (r < 90) {
m.hueSelector.style.left = (o - 7) + "px";
m.hueSelector.style.top = (t - 7) + "px";
m.updateLuminosity([d3[(o + (t * 250)) * 4], d3[(o + (t * 250)) * 4 + 1], d3[(o + (t * 250)) * 4 + 2]])
} else {
if (r > 100) {
n = q / r;
s = p / r;
m.luminosityPosition[0] = (n * 110) + 125;
m.luminosityPosition[1] = (s * 110) + 125;
m.luminositySelector.style.left = (m.luminosityPosition[0] - 7) + "px";
m.luminositySelector.style.top = (m.luminosityPosition[1] - 7) + "px"
}
}
o = Math.floor(m.luminosityPosition[0]);
t = Math.floor(m.luminosityPosition[1]);
m.color[0] = m.luminosityData[(o + (t * 250)) * 4];
m.color[1] = m.luminosityData[(o + (t * 250)) * 4 + 1];
m.color[2] = m.luminosityData[(o + (t * 250)) * 4 + 2];
m.dispatchEvent(m.changeEvent)
}
},
show: function() {
this.container.style.visibility = "visible"
},
hide: function() {
this.container.style.visibility = "hidden"
},
getColor: function() {
return this.color
},
setColor: function(c) {
var a, e, f, d, b = Math.PI / 180;
this.color = c;
a = RGB2HSB(c[0] / 255, c[1] / 255, c[2] / 255);
e = a[0] * b;
f = (a[1] / 100) * 90;
this.hueSelector.style.left = ((Math.cos(e) * f + 125) - 7) + "px";
this.hueSelector.style.top = ((Math.sin(e) * f + 125) - 7) + "px";
d = HSB2RGB(a[0], a[1], 100);
d[0] *= 255;
d[1] *= 255;
d[2] *= 255;
this.updateLuminosity(d);
e = (a[2] / 100) * 360 * b;
this.luminosityPosition[0] = (Math.cos(e) * 110) + 125;
this.luminosityPosition[1] = (Math.sin(e) * 110) + 125;
this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + "px";
this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + "px";
this.dispatchEvent(this.changeEvent)
},
updateLuminosity: function(j) {
var d, f, l, g, p, b, a, o = 100,
h = 120,
k, n = 1080 / 2,
e = 1 / n,
c = Math.PI / 180,
m = (n / 360);
b = this.luminosity.width / 2;
a = this.luminosity.height / 2;
d = this.luminosity.getContext("2d");
d.lineWidth = 3;
d.clearRect(0, 0, this.luminosity.width, this.luminosity.height);
for (k = 0; k < n; k++) {
f = k / m * c;
l = Math.cos(f);
g = Math.sin(f);
p = 255 - (k * e) * 255;
d.strokeStyle = "rgb(" + Math.floor(j[0] - p) + "," + Math.floor(j[1] - p) + "," + Math.floor(j[2] - p) + ")";
d.beginPath();
d.moveTo(l * o + b, g * o + a);
d.lineTo(l * h + b, g * h + a);
d.stroke()
}
this.luminosityData = d.getImageData(0, 0, this.luminosity.width, this.luminosity.height).data
},
addEventListener: function(b, c, a) {
this.dispatcher.addEventListener(b, c, a)
},
dispatchEvent: function(a) {
this.dispatcher.dispatchEvent(a)
},
removeEventListener: function(b, c, a) {
this.dispatcher.removeEventListener(b, c, a)
}
};
function Palette() {
var e, d, b, a, n = 90,
m = 1080,
f = 1 / m,
l = m / 360,
c = Math.PI / 180,
j, h, k, g, o;
e = document.createElement("canvas");
e.width = 250;
e.height = 250;
b = e.width / 2;
a = e.height / 2;
d = e.getContext("2d");
d.lineWidth = 1;
for (j = 0; j < m; j++) {
h = j / l * c;
k = Math.cos(h);
g = Math.sin(h);
d.strokeStyle = "hsl(" + Math.floor((j * f) * 360) + ", 100%, 50%)";
d.beginPath();
d.moveTo(k + b, g + a);
d.lineTo(k * n + b, g * n + a);
d.stroke()
}
o = d.createRadialGradient(b, b, 0, b, b, n);
o.addColorStop(0, "rgba(255, 255, 255, 1)");
o.addColorStop(1, "rgba(255, 255, 255, 0)");
d.fillStyle = o;
d.fillRect(0, 0, e.width, e.height);
return e
}
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
COLOR = [0, 0, 0],
i,
container, foregroundColorSelector, canvas, flattenCanvas, context, isFgColorSelectorVisible = false;
init();
function init() {
var hash, palette;
container = document.createElement("div");
document.body.appendChild(container);
canvas = document.createElement("canvas");
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
canvas.style.cursor = "crosshair";
container.appendChild(canvas);
context = canvas.getContext("2d");
palette = new Palette();
foregroundColorSelector = new ColorSelector(palette);
foregroundColorSelector.addEventListener("change", onForegroundColorSelectorChange, false);
container.appendChild(foregroundColorSelector.container);
onMenuForegroundColor();
setColorAll(COLOR);
foregroundColorSelector.setColor(COLOR);
canvas.addEventListener("mousedown", onCanvasMouseDown, false);
}
function onForegroundColorSelectorChange(a) {
COLOR = foregroundColorSelector.getColor();
setColorAll(COLOR);
}
//show palette
function onMenuForegroundColor() {
hidePalette();
foregroundColorSelector.show();
foregroundColorSelector.container.style.left = 0;
foregroundColorSelector.container.style.top = 0;
isFgColorSelectorVisible = true
}
function hidePalette() {
foregroundColorSelector.hide();
}
/* mouse and touches up down move */
//mouse down canvas
function onCanvasMouseDown(b) {
hidePalette();
window.addEventListener("mouseup", onCanvasMouseUp, false)
}
//up on canvas
function onCanvasMouseUp() {
window.removeEventListener("mouseup", onCanvasMouseUp, false);
}
function setColorAll(color) {
foregroundColor = document.getElementById('selColor');
var foregroundCtx = this.foregroundColor.getContext("2d");
foregroundCtx.fillStyle = "rgb(" + COLOR[0] + "," + COLOR[1] + "," + COLOR[2] + ")";
foregroundCtx.fillRect(0, 0, foregroundColor.width, foregroundColor.height);
}
#mainDiv {
transform: scale(.7); //scale down to 70% of the current height
}
虽然我不打算回顾你的300多行小提琴，但如果你想缩放画布内容，你可以： 清理画布， scalescalefactorX，scalefactorY以缩放所有后续图形， 重新绘制所有画布内容。 始终通过取消缩放画布来清理：context.scale scalefactorX，-scalefactorY
在这里输入一些代码。。没有人想去小提琴家看你的代码。请在这里输入相关代码，并提供一个链接到您的小提琴，以便有人可以帮助您解决问题，寻求调试帮助。为什么此代码不起作用？必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：.b1.arc8,8,6,0，Math.PI*2，true；b1.7,7,6,0，Math.PI*2，真；这些都是相关的线路。更改第三个参数可以更改半径，更改前两个参数可以调整位置。@Xufox:这是一个很好的答案。请将其张贴在答案中，而不是评论中。“如果不是更多的话，我们可以提高投票率。”阿克沙伊汉德尔瓦尔想了想，但我觉得不够精确。如果OP想要一个更精确的答案，他需要陈述他的确切标准e。G实际上要小多少？我甚至不确定他是否试图改变那些确切的台词。