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