<Canvas> は Canvas を使用して絵を描いたり背景画像として使用しますが、奇妙な効果が発生します_html/css

WBOY

リリース： 2016-06-24 11:27:54

オリジナル

2052 人が閲覧しました

これは最初の外観です。私が望む効果は、ハートがスクロールバーと一緒にスクロールしないことです

スクロールバーをドラッグすると、ハートも一緒に移動しますが、別のハートは元の位置に固定されます。

スクロールバーをドラッグし続けます、

最初のページのハートがスクロールバーとともに移動するのがわかりますが、同時に別のハートが中央に固定されます。
このハートを真ん中に固定したいだけです。スクロールバーの移動によって別のハートが表示されることはありません。

JS を通じてキャンバスを作成し、背景画像としてペイントを設定しました。 JS コードは次のとおりです:
var Canvas = document.createElement('canvas');
var Canvas_width = $("body").css ("幅") .split("p")[0];
var Canvas_height = $("body").css("height").split("p")[0]; .appendChild(canvas) ;
Canvas.id='homePageCanvas';
Canvas.height = Canvas_height;

drawHeartCurve(); // ハートを描画します
document.body.style.background = "url('"+homePageCanvas.toDataURL()+"')";

document.body.style['background-attachment']='fixed';

HTML/ CSS には、スクロールバーを表示するための height div があるだけです。

ディスカッションに返信 (解決策)

この行を削除します

Document.body.appendChild(canvas);
いいえちなみに、このように描かれていたものは消えています。

デバッグにアラートを追加し、コードが繰り返し実行されているかどうかを確認することをお勧めします。

コードが繰り返し実行されているかどうかを確認するために、アラートデバッグを追加することをお勧めします。

ハート描画関数にalert(1)を追加しましたが、1回しかポップアップしません....

要素を参照するときはID「homePageCanvas」を使用せず、直接使用してください var Canvas = document.createElement( 'canvas'); この行で定義されている Canvas 変数で十分です

<!doctype html><html lang="en"><head>	<meta charset="UTF-8" />	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />	<title> 页面名称 </title><style type="text/css">html,body {	height: 100%;}</style></head><body><div id="a" style="width:100px;height:3000px;background:yellow;position:absolute;"></div><script type="text/javascript">    var canvas = document.createElement('canvas');    var canvas_width = document.body.offsetWidth;    var canvas_height = document.body.offsetHeight;    canvas.id='homePageCanvas';    canvas.width = canvas_width;    canvas.height = canvas_height;    var context = canvas.getContext("2d");    context.arc(400,400,100,0,2*Math.PI,true);    context.fill();    document.body.style.background = "url('"+canvas.toDataURL()+"')";    document.body.style['background-attachment']='fixed';</script></body></html>

ログイン後にコピー

解決しました。

次のステートメントを追加します:

canvas.style.display="none";