使用canvas画图并充当背景图片,但出现奇怪效果_html/css_WEB-ITnose

html教程评论1.8K views阅读模式

这是初始的样子,我想要的效果是这颗心不随滚动条滚动

当我拖动滚动条的时候,这颗心跟着移动了,但原位置固定了另一颗心。

继续拖动滚动条,

由此可见,初始页面的心会随着滚动条移动,但同时有另一个心被固定在中间。

我只想要让这个心被固定在中心。不会因为滚动条的移动而出现另一颗心。

我通过JS建立canvas并将画设为背景图,JS代码如下:

var canvas = document.createElement('canvas');

var canvas_width = $("body").css("width").split("p")[0];

var canvas_height = $("body").css("height").split("p")[0];

document.body.appendChild(canvas);

canvas.id='homePageCanvas';

canvas.width = canvas_width;

canvas.height = canvas_height;

//canvas.style.backgroundColor = '#F9D1D4';

drawHeartCurve(); //画出了一个心

document.body.style.background = "url('"+homePageCanvas.toDataURL()+"')";

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

HTML/CSS只有一个很高的div让滚动条出现。

回复讨论(解决方案)

document.body.appendChild(canvas);这行删除

document.body.appendChild(canvas);这行删除

不行,这样子画出来的东西就没了。

建议加个alart调试看看, 会不会是代码重复执行了。

建议加个alart调试看看, 会不会是代码重复执行了。

我在画心的函数里加了alert(1),只弹出一次1....

你引用元素时不要用id “homePageCanvas”,直接用 var canvas = document.createElement('canvas');这行定义的 canvas变量就可以了

	
 	
 	 页面名称 
 

已解决。
要增添下列语句:

canvas.style.display="none";

企鹅博客
  • 本文由 发表于 2019年9月8日 17:32:50
  • 转载请务必保留本文链接:https://www.qieseo.com/366122.html

发表评论