我的代码是烟囱冒烟的房子。烟雾由setInterval功能控制，该功能连接到HTML页面上的滑块，该滑块用于控制烟雾吹出的速度，但当您移动滑块时，它会重新启动烟雾功能。
如何设置我的滑块以控制烟雾的速度？
这是我的代码：
/*
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>
答案 0 :(得分：1)
在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>
答案 1 :(得分：0)
删除此行：document.querySelector（'＃speed'）。value = counter;
我测试了这个，在FireFox中工作。