我的代码是一座烟囱里冒出烟的房子。烟雾由 setInterval 函数控制，该函数连接到 HTML 页面上的 slider ，该 slider 旨在控制烟雾吹出的速度，但当您移动 slider 时，它会重新启动烟雾功能。
如何设置 slider 来控制烟雾的速度？
这是我的代码:
/*
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); //tip
ctx.lineTo(325,350); //mid-right
ctx.lineTo(319,400); //bot-right
ctx.lineTo(250,387); //bot-left
ctx.lineTo(230,325); //mid-left
ctx.closePath();
ctx.fill();
}
/*
Draws the side of the house.
*/
function drawSide() {
ctx.fillStyle = "#6F978F";
ctx.beginPath();
ctx.moveTo(325,350); //top-left
ctx.lineTo(412,325); //top-right
ctx.lineTo(400,375); //bot-right
ctx.lineTo(319,400); //bot-left
ctx.closePath();
ctx.fill();
}
/*
Draws the chimney of the house.
*/
function drawChimney() {
ctx.beginPath();
ctx.moveTo(308,217); //top-left
ctx.lineTo(337,213); //top-right
ctx.lineTo(337,250); //bot-right
ctx.lineTo(312,250); //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); //top-left
ctx.lineTo(370,221); //top-right
ctx.lineTo(425,324); //bot-right
ctx.lineTo(334,350); //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); //bot-left
ctx.lineTo(258.5,349); //top-left
ctx.lineTo(297,350); //top-right
ctx.lineTo(295,395); //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 = " #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); //tip
ctx.lineTo(288,300); //right
ctx.lineTo(275,325); //bot
ctx.lineTo(260,301); //left
ctx.closePath();
ctx.fillStyle = "#F9F2C5";
ctx.fill();
ctx.restore();
}
/*
Draws the Christmas tree.
*/
function drawTree() {
/*
// tree top
ctx.beginPath();
ctx.moveTo(129,280); //tip
ctx.lineTo(179,415); //right
ctx.lineTo(90,419); //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree trunk
ctx.fillStyle = "#A7673B";
ctx.beginPath();
ctx.moveTo(124,417); //top-left
ctx.lineTo(150,415); //top-right
ctx.lineTo(148,427); //bot-right
ctx.lineTo(128,428); //bot-left
ctx.closePath();
ctx.fill();
*/
// tree top 1
ctx.beginPath();
ctx.moveTo(135,350); //tip
ctx.lineTo(179,415); //right
ctx.lineTo(90,419); //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree top 2
ctx.beginPath();
ctx.moveTo(135,320); //tip
ctx.lineTo(179,385); //right
ctx.lineTo(90,385); //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree trunk
ctx.fillStyle = "#A7673B";
ctx.beginPath();
ctx.moveTo(124,417); //top-left
ctx.lineTo(150,415); //top-right
ctx.lineTo(148,427); //bot-right
ctx.lineTo(128,428); //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;
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>最佳答案
在 outputUpdate() 中，您重新定义了大量变量，以及 move() 和 redraw() 函数。唯一的区别是，在重新定义的 redraw() 中，您不调用 drawCandy()。通过重新定义这些来完成您想要做的任何事情，这是一种荒谬的方式。我不确定那是什么。如果您确实不想调用drawCandy()，请传递一个参数，或设置一个全局变量。不要重复代码。重复代码导致了严重的问题。
您在 setInterval() 方面遇到的问题是，您在设置以不同速率更新的新间隔之前没有清除任何间隔。这会导致您创建大量间隔计时器，从而导致 CPU 陷入困境。为了解决这个问题，我只是使用了暴力的方法，创建全局变量moveIntervalId来存储间隔ID，然后调用clearInterval()之前 setInterval()来电。
我还将烟雾绘制到了它自己的函数中。
var moveIntervalId;
/*
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); //tip
ctx.lineTo(325,350); //mid-right
ctx.lineTo(319,400); //bot-right
ctx.lineTo(250,387); //bot-left
ctx.lineTo(230,325); //mid-left
ctx.closePath();
ctx.fill();
}
/*
Draws the side of the house.
*/
function drawSide() {
ctx.fillStyle = "#6F978F";
ctx.beginPath();
ctx.moveTo(325,350); //top-left
ctx.lineTo(412,325); //top-right
ctx.lineTo(400,375); //bot-right
ctx.lineTo(319,400); //bot-left
ctx.closePath();
ctx.fill();
}
/*
Draws the chimney of the house.
*/
function drawChimney() {
ctx.beginPath();
ctx.moveTo(308,217); //top-left
ctx.lineTo(337,213); //top-right
ctx.lineTo(337,250); //bot-right
ctx.lineTo(312,250); //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); //top-left
ctx.lineTo(370,221); //top-right
ctx.lineTo(425,324); //bot-right
ctx.lineTo(334,350); //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); //bot-left
ctx.lineTo(258.5,349); //top-left
ctx.lineTo(297,350); //top-right
ctx.lineTo(295,395); //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 = " #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); //tip
ctx.lineTo(288,300); //right
ctx.lineTo(275,325); //bot
ctx.lineTo(260,301); //left
ctx.closePath();
ctx.fillStyle = "#F9F2C5";
ctx.fill();
ctx.restore();
}
/*
Draws the Christmas tree.
*/
function drawTree() {
/*
// tree top
ctx.beginPath();
ctx.moveTo(129,280); //tip
ctx.lineTo(179,415); //right
ctx.lineTo(90,419); //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree trunk
ctx.fillStyle = "#A7673B";
ctx.beginPath();
ctx.moveTo(124,417); //top-left
ctx.lineTo(150,415); //top-right
ctx.lineTo(148,427); //bot-right
ctx.lineTo(128,428); //bot-left
ctx.closePath();
ctx.fill();
*/
// tree top 1
ctx.beginPath();
ctx.moveTo(135,350); //tip
ctx.lineTo(179,415); //right
ctx.lineTo(90,419); //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree top 2
ctx.beginPath();
ctx.moveTo(135,320); //tip
ctx.lineTo(179,385); //right
ctx.lineTo(90,385); //left
ctx.closePath();
ctx.fillStyle = "#8E9D2A";
ctx.fill();
// tree trunk
ctx.fillStyle = "#A7673B";
ctx.beginPath();
ctx.moveTo(124,417); //top-left
ctx.lineTo(150,415); //top-right
ctx.lineTo(148,427); //bot-right
ctx.lineTo(128,428); //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();
}
}
/*
Draw the smoke
*/
function drawSmoke() {
// 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();
}
/*
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.
*/
function redraw(){
drawSmoke();
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();
clearInterval(moveIntervalId);
moveIntervalId = 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) {
document.querySelector('#speed').value = counter;
clearInterval(moveIntervalId);
moveIntervalId = setInterval(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>Luong, Jessica | Qin, Ashley</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>关于javascript - 输入 slider 的 setInterval 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40570851/