関数の出力を保存する方法は？

私はクリックしたときに色がランダムに変化する円を持つサイトを持っています。関数の出力を保存する方法は？

var letter = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'a', 'b', 'c', 'd', 'e', 'f']; 
 

 
function color() { 
 
    lineOfLetters = letter[Math.floor(Math.random() * 15)] + letter[Math.floor(Math.random() * 15)] + letter[Math.floor(Math.random() * 15)] + letter[Math.floor(Math.random() * 15)] + letter[Math.floor(Math.random() * 15)] + letter[Math.floor(Math.random() * 15)]; 
 
    var colorNumber = "#" + lineOfLetters; 
 
    return colorNumber; 
 
} 
 

 
var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var radius = 250 
 

 
ctx.beginPath(); 
 
ctx.arc(300, 300, 250, 0, 2 * Math.PI, false) 
 

 
function fillCircle() { 
 
    ctx.fillStyle = color(); 
 
    ctx.fill() 
 
} 
 
document.write(color())

.button { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: red; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    position: absolute; 
 
    left: 58px; 
 
    top: 58px; 
 
}

<body onload="fillCircle()"> 
 
    <div onclick="fillCircle()" class="button"></div> 
 
    <canvas id="myCanvas" width="600" height="600">nope</canvas> 
 

 
</body>

私はページが円である正確に何色が表示されます。

私が試した：

document.write(color())

しかし、単に別の色の値を生成し、全くの円の色に関係しないことを。

サークルの色を正確に表示するにはどうすればよいですか？

出典

2017-11-17 Ivan Nasonov

color()の結果を変数に代入し、それをDOMに配置します。 document.writeを

function fillCircle(){ 
    document.write(ctx.fillStyle = color()); 
    ctx.fill(); 
}

しかしここでは使用すべきではありません、あなたはむしろ例えばhtml要素を追加する必要があります：

出典

2017-11-17 21:32:40 Barmar

うんを、：あなたは簡単に行うことができます6文字の16進文字列を取得します！ –

はちょうどこのような生成された色があることを示す

<span id="color" > </span>

だから我々は、コード

const colorLabel = document.getElementById("color"); 

function fillCircle(){ 
    colorLabel.textContent = ctx.fillStyle = color(); 
    ctx.fill(); 
}

追記内でこれを行うことができます、おかげでたくさんの作品

const color = "#" + Math.floor(Math.random() * 16 ** 6).toString(16);

出典

2017-11-17 21:33:51

ええ、私はちょうどそれをテストするためにdocument.writeを使用していた、私はhtml要素でそれをやってしまった。そのサイドノートをありがとう！ –

関数の出力を保存する方法は？

答えて

関連する問題