使用canvas画图并充当背景图片，但出现奇怪效果_html/css

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

php中文网

发布： 2016-06-24 11:27:54

原创

2377人浏览过

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

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

继续拖动滚动条，

由此可见，初始页面的心会随着滚动条移动，但同时有另一个心被固定在中间。
我只想要让这个心被固定在中心。不会因为滚动条的移动而出现另一颗心。

我通过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让滚动条出现。

稿定抠图

AI自动消除图片背景

查看详情

回复讨论(解决方案)

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

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

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

我在画心的函数里加了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";