0
私のコードは、煙突から煙が出ている家です。煙はsetInterval機能によって制御され、HTMLページ上の煙が出る速度を制御するスライダーに接続しますが、スライダーを動かすと煙機能が再開します。入力スライダのsetIntervalが正しく機能しない
煙の速度を制御するためにスライダを設定するにはどうすればよいですか？ここ
私のコードです：
/*
Draws each floor of the canvas.
*/
function drawFloor() {
ctx.fillStyle = "white";
ctx.fillRect(0, 250, 500, 250);
}
/*
Draws the front side of the house.
*/
function drawFront() {
ctx.fillStyle = "#91AEAC";
ctx.beginPath();
ctx.moveTo(275,256); \t //tip
ctx.lineTo(325,350); \t //mid-right
ctx.lineTo(319,400); \t //bot-right
ctx.lineTo(250,387); \t //bot-left
ctx.lineTo(230,325); \t //mid-left
ctx.closePath();
ctx.fill();
}
/*
Draws the side of the house.
*/
function drawSide() {
ctx.fillStyle = "#6F978F";
ctx.beginPath();
ctx.moveTo(325,350); \t //top-left
ctx.lineTo(412,325); \t //top-right
ctx.lineTo(400,375); \t //bot-right
ctx.lineTo(319,400); \t //bot-left
ctx.closePath();
ctx.fill();
}
/*
Draws the chimney of the house.
*/
function drawChimney() {
ctx.beginPath();
ctx.moveTo(308,217); \t //top-left
ctx.lineTo(337,213); \t //top-right
ctx.lineTo(337,250); \t //bot-right
ctx.lineTo(312,250); \t //bot-left
ctx.closePath();
ctx.fillStyle = "#8EB0AF";
ctx.fill();
}
/*
Draws the roof of the house.
*/
function drawRoof() {
ctx.fillStyle = "#8E2F35";
ctx.beginPath();
ctx.moveTo(278,244); \t //top-left
ctx.lineTo(370,221); \t //top-right
ctx.lineTo(425,324); \t //bot-right
ctx.lineTo(334,350); \t //bot-left
ctx.closePath();
ctx.fill();
// draw left line of the roof at the from
ctx.lineWidth=10;
ctx.strokeStyle = "#C55463";
ctx.beginPath();
ctx.moveTo(275,250); //top
ctx.lineTo(220,336); //bot
ctx.stroke();
// draw right line of the roof at the from
ctx.lineWidth=10;
ctx.strokeStyle = "#C55463";
ctx.beginPath();
ctx.moveTo(275,245); //top
ctx.lineTo(330,352); //bot
ctx.stroke();
}
/*
Draws the door of the house.
*/
function drawDoor(){
// draws the top of the door
ctx.beginPath();
ctx.arc(278, 351, 19, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle = "#C18459";
ctx.fill();
// draws the bottom of the door
ctx.beginPath();
ctx.moveTo(265,389); \t //bot-left
ctx.lineTo(258.5,349); \t //top-left
ctx.lineTo(297,350); \t //top-right
ctx.lineTo(295,395); \t //bot-right
ctx.closePath();
ctx.fillStyle = "#C18459";
ctx.fill();
// draws the door knob
ctx.beginPath();
ctx.arc(288, 363, 4, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle = " \t #5F371F";
ctx.fill();
}
/*
Draws the window of the house.
*/
function drawWindow() {
ctx.save();
ctx.shadowColor="white";
ctx.shadowBlur = 20;
ctx.beginPath();
ctx.moveTo(275,277); \t //tip
ctx.lineTo(288,300); \t //right
ctx.lineTo(275,325); \t //bot
ctx.lineTo(260,301); \t //left
ctx.closePath();
ctx.fillStyle = "#F9F2C5";
ctx.fill();
ctx.restore();
}
/*
Draws the Christmas tree.
*/
function drawTree() {
/*
// tree top
ctx.beginPath();
ctx.moveTo(129,280); \t //tip
ctx.lineTo(179,415); \t //right
ctx.lineTo(90,419); \t //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree trunk
ctx.fillStyle = "#A7673B";
ctx.beginPath();
ctx.moveTo(124,417); \t //top-left
ctx.lineTo(150,415); \t //top-right
ctx.lineTo(148,427); \t //bot-right
ctx.lineTo(128,428); \t //bot-left
ctx.closePath();
ctx.fill();
*/
// tree top 1
ctx.beginPath();
ctx.moveTo(135,350); \t //tip
ctx.lineTo(179,415); \t //right
ctx.lineTo(90,419); \t //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree top 2
ctx.beginPath();
ctx.moveTo(135,320); \t //tip
ctx.lineTo(179,385); \t //right
ctx.lineTo(90,385); \t //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree trunk
ctx.fillStyle = "#A7673B";
ctx.beginPath();
ctx.moveTo(124,417); \t //top-left
ctx.lineTo(150,415); \t //top-right
ctx.lineTo(148,427); \t //bot-right
ctx.lineTo(128,428); \t //bot-left
ctx.closePath();
ctx.fill();
}
/*
Draw the candy cane.
*/
function drawCandy() {
ctx.beginPath();
ctx.strokeStyle = "#C72828";
ctx.beginPath();
ctx.lineWidth=8;
ctx.moveTo(200,435);
ctx.bezierCurveTo(205,405,220,420,220,460);
ctx.stroke();
ctx.closePath();
}
/*
Draws the snowman in the background.
*/
function drawSnowman() {
// snowman body
ctx.beginPath();
ctx.arc(80,250,20,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#D8D8D8";
ctx.fill();
// snowman head
ctx.beginPath();
ctx.arc(80,222,13,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#D8D8D8";
ctx.fill();
// snowman hat
ctx.beginPath();
ctx.strokeStyle="#F06140";
ctx.rect(78,200,5,5);
ctx.stroke();
ctx.strokeStyle = "#FF4444";
ctx.beginPath();
ctx.lineWidth=5;
ctx.moveTo(70,210); //top
ctx.lineTo(92,210); //bot
ctx.stroke();
// snowman left eye
ctx.beginPath();
ctx.arc(76,220,2,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#000000";
ctx.fill();
// snowman right eye
ctx.beginPath();
ctx.arc(84,220,2,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#000000";
ctx.fill();
// snowman left hand
ctx.strokeStyle = "#854B24";
ctx.beginPath();
ctx.lineWidth=3;
ctx.moveTo(45,235); //top
ctx.lineTo(62,243); //bot
ctx.stroke();
// snowman right hand
ctx.strokeStyle = "#854B24";
ctx.beginPath();
ctx.lineWidth=3;
ctx.moveTo(113,235); //top
ctx.lineTo(98,243); //bot
ctx.stroke();
}
/*
Draws the falling snow.
*/
function drawSnow() {
for (var i = 0; i < 10; i++) {
ctx.beginPath();
ctx.arc(Math.floor(Math.random()*(500)), Math.floor(Math.random()*(500))
, Math.random() + 0.7, 0, 2*Math.PI);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
}
}
/*
Draws the stars in the sky.
*/
function drawStars() {
ctx.save();
ctx.shadowColor="white";
ctx.shadowBlur = 10;
ctx.beginPath();
ctx.arc(55,115,1,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(90,90,0.5,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(100,30,1,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(120,48,0.4,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(133,100,0.8,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(150,80,1,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(224,155,0.5,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(250,50,1,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(290,100,0.5,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(400,100,1,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(430,111,1.2,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(444,48,0.5,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(450,155,0.6,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(480,120,0.6,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.restore();
}
var canvas = document.getElementsByTagName("canvas")[0]; //get the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
/*
Create objects a to g that make up the smoke.
Each object is placed off screen, and only their shadows
remain on the screen.
*/
var a = { //create object a of the smoke
x:621, //x value
y:250, //y value
r:13 //radius
}
var b = { //create object b of the smoke
x:595,
y:190,
r:13
}
var c = { //create object c of the smoke
x:605,
y:180,
r:13
}
var d = { //create object d of the smoke
x:620,
y:210,
r:13
}
var e = { //create object e of the smoke
x:610,
y:170,
r:10
}
var f = { //create object f of the smoke
x:610,
y:250,
r:8
}
var g = { //create object g of the smoke
x:650,
y:200,
r:8
}
/*
Draws all components on the canvas.
*/
var redraw = function(){
// draw smoke
ctx.save();
ctx.shadowColor="#808080";
ctx.shadowBlur = 40;
ctx.shadowOffsetX = -300;
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.beginPath(); //draw the object c
ctx.arc(a.x, a.y, a.r, 0, Math.PI*2);
ctx.fillStyle = "rgba(128, 128, 128, 0.4)";
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object b
ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object c
ctx.arc(c.x, c.y, c.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object d
ctx.arc(d.x, d.y, d.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object e
ctx.arc(e.x, e.y, e.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object f
ctx.arc(f.x, f.y, f.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object g
ctx.arc(g.x, g.y, g.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.restore();
drawStars();
drawFloor();
drawFront();
drawSide();
drawChimney();
drawRoof();
drawDoor();
drawWindow();
drawTree();
drawSnowman();
drawSnow();
drawCandy();
requestAnimationFrame(redraw);
}
/*
Increases each smoke component in size and moves it up the canvas.
Returns each one to a specified position and size after it reaches
a specified point above the canvas.
*/
function move(){
a.y -= 8; // move circle up canvas
a.r += 2; // increase circle in size
if (a.y < -100) {
// if the circle reaches this position, it returns to specified position
// and size
a.y = 195; // returns to this position
a.r = 13; // returns to this size
}
b.y -= 8;
b.r += 2;
if (b.y < -200) {
b.y = 195;
b.r = 13;
}
c.y -= 8;
c.r += 2;
if (c.y < -300) {
c.y = 195;
c.r = 13;
}
d.y -= 8;
d.r += 2;
if (d.y < -250) {
d.y = 195;
d.r = 13;
}
e.y -= 8;
e.r += 2;
if (e.y < -200) {
e.y = 195;
e.r = 10;
}
f.y -= 8;
f.r += 2;
if (f.y < -220) {
f.y = 200;
f.r = 10;
}
g.y -= 8;
g.r += 2;
if (g.y < -250) {
g.y = 195;
g.r = 10;
}
}
redraw();
setInterval(move, 100); // initial animation before slider is used
/*
Uses slider output to determine how often the animate is executed.
Reverses the number so that when user positions the slider to the right,
the code is executed more often (faster smoke); likewise, when it is
positioned to the left, it is executed less often (slower smoke).
*/
function outputUpdate(counter) {
var canvas = document.getElementsByTagName("canvas")[0]; //get the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
/*
Create objects a to g that make up the smoke.
Each object is placed off screen, and only their shadows
remain on the screen.
*/
var a = { //create object a of the smoke
x:621, //x value
y:250, //y value
r:13 //radius
}
var b = { //create object b of the smoke
x:595,
y:190,
r:13
}
var c = { //create object c of the smoke
x:605,
y:180,
r:13
}
var d = { //create object d of the smoke
x:620,
y:210,
r:13
}
var e = { //create object e of the smoke
x:610,
y:170,
r:10
}
var f = { //create object f of the smoke
x:610,
y:250,
r:8
}
var g = { //create object g of the smoke
x:650,
y:200,
r:8
}
/*
Draws all components on the canvas.
*/
var redraw = function(){
// draw smoke
ctx.save();
ctx.shadowColor="#808080";
ctx.shadowBlur = 40;
ctx.shadowOffsetX = -300;
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.beginPath(); //draw the object c
ctx.arc(a.x, a.y, a.r, 0, Math.PI*2);
ctx.fillStyle = "rgba(128, 128, 128, 0.4)";
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object b
ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object c
ctx.arc(c.x, c.y, c.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object d
ctx.arc(d.x, d.y, d.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object e
ctx.arc(e.x, e.y, e.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object f
ctx.arc(f.x, f.y, f.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath(); //draw the object g
ctx.arc(g.x, g.y, g.r, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.restore();
drawStars();
drawFloor();
drawFront();
drawSide();
drawChimney();
drawRoof();
drawDoor();
drawWindow();
drawTree();
drawSnowman();
drawSnow();
requestAnimationFrame(redraw);
}
/*
Increases each smoke component in size and moves it up the canvas.
Returns each one to a specified position and size after it reaches
a specified point above the canvas.
*/
function move(){
a.y -= 8; // move circle up canvas
a.r += 2; // increase circle in size
if (a.y < -100) {
// if the circle reaches this position, it returns to specified position
// and size
a.y = 195; // returns to this position
a.r = 13; // returns to this size
}
b.y -= 8;
b.r += 2;
if (b.y < -200) {
b.y = 195;
b.r = 13;
}
c.y -= 8;
c.r += 2;
if (c.y < -300) {
c.y = 195;
c.r = 13;
}
d.y -= 8;
d.r += 2;
if (d.y < -250) {
d.y = 195;
d.r = 13;
}
e.y -= 8;
e.r += 2;
if (e.y < -200) {
e.y = 195;
e.r = 10;
}
f.y -= 8;
f.r += 2;
if (f.y < -220) {
f.y = 200;
f.r = 10;
}
g.y -= 8;
g.r += 2;
if (g.y < -250) {
g.y = 195; \t
g.r = 10;
}
}
redraw();
document.querySelector('#speed').value = counter;
setInterval(function(){ move() }, (200-counter));
}body {
padding-left: 2em;
}
canvas {
border: 1px solid grey;
background-color: #4A6485;
display: block;
}
#fakeLinks {
position: relative;
color: blue;
font-family: arial;
top: -10;
left: -25;
}
span {
color: black;
}
#icon {
position: relative;
top: 12;
left: -5;
}
#setSpeed {
position: relative;
top:0;
left:180;
right:0;
bottom:1000;
}
#speed {
color: white;
}
#info {
position: relative;
top:0;
left:0;
right:0;
bottom:0;
}<!-- stars or snow; separate function
for smoke - does not work with range?; stars behind smoke; get rid of range #
-->
<html lang="en">
<head>
<title>smoke</title>
<div id="fakeLinks">
<img id="icon" src="Images/houseicon.png" alt="houseicon">vancouver, BC
<span>></span> housing <span>></span> for rent</div>
<h2>Get out of the cold and stay at our winter vacation rental!</h2>
<div class="wrapper">
<canvas id="canvas" width="500" height="500"></canvas>
<input id="setSpeed" type="range" min="0" max="200" value="100"
oninput="outputUpdate(value)" name="sliderInput"/>
<output for="setSpeed" id="speed" name="sliderOutput"></output>
</div>
<link rel="stylesheet" href="Style/house.css">
</head>
<!--Commented out for use in snippet <script src="house.js"></script> -->
<body onLoad="drawSnow()">
<div id ="info">
<p>Everything is completed. We have a working fireplace and electricity.</p>
<p>There were no major challenges in the construction of this house.</p></br>
<p>For more information please contact: </p>
<p> </p>
<p></p>
</div>
</body>
</html>
あなたは**最小限を提供するために、何を期待されていることは、あなたが持っている問題を隔離している[MCVE] **です。 – Makyen