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