Javascript 如何将div背景设置为canvs_Javascript_Html_Css_Canvas

Javascript 如何将div背景设置为canvs

javascript html css canvas

Javascript 如何将div背景设置为canvs,javascript,html,css,canvas,Javascript,Html,Css,Canvas,这是我的密码： <!DOCTYPE html> <html> <body> <div id='rect' style='width:200px;height:200px;border:1px solid red'> </div> <canvas id="myCanvas" style="border:1px solid #d3d3d3;"> &l

这是我的密码：

<!DOCTYPE html>
<html>
    <body>
        <div id='rect' style='width:200px;height:200px;border:1px solid red'>
        </div>
        <canvas id="myCanvas" style="border:1px solid #d3d3d3;">    
        <script>
            patternStyle = document.getElementById("myCanvas");
            var patternContext = patternStyle.getContext('2d');
            patternStyle.width = 6;
            patternStyle.height = 6;
            patternContext.globalAlpha = 10;
            patternContext.fillStyle = 'white';
            patternContext.rect(0, 0, 6, 6);
            patternContext.fillRect(0, 0, 6, 6);
            patternContext.strokeStyle = 'red';
            patternContext.lineWidth = 2;
            patternContext.beginPath();
            patternContext.moveTo(3, -3);
            patternContext.lineTo(-3, 3);
            patternContext.moveTo(0, 6);
            patternContext.lineTo(6, 0);
            patternContext.moveTo(9, 3);
            patternContext.lineTo(3, 9);
            patternContext.stroke();
        </script> 
    </body>
</html>


patternStyle=document.getElementById（“myCanvas”）；
var patternContext=patternStyle.getContext（'2d'）；
patternStyle.width=6；
patternStyle.height=6；
patternContext.globalAlpha=10；
patternContext.fillStyle='white'；
patternContext.rect（0,0,6,6）；
patternContext.fillRect（0,0,6,6）；
patternContext.strokeStyle='red'；
patternContext.lineWidth=2；
patternContext.beginPath（）；
patternContext.moveTo（3，-3）；
patternContext.lineTo（-3,3）；
patternContext.moveTo（0,6）；
patternContext.lineTo（6,0）；
patternContext.moveTo（9,3）；
patternContext.lineTo（3,9）；
stroke（）；

我需要将

rect（div的id）

背景图像设置为

myCanvas（画布的id）

。我怎样才能做到这一点

在这里找到JSFIDLE链接：

查看更新的FIDLE：

重点是：

dataUrl = document.getElementById('myCanvas').toDataURL();
document.getElementById('rect').style.background='url('+dataUrl+')';