gpt4 book ai didi

javascript - 如何将div背景设置为 Canvas

转载 作者:行者123 更新时间:2023-11-28 17:05:55 25 4
gpt4 key购买 nike

这是我的代码:

<!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>

我需要将 rect(id of the div) 背景图像设置为 myCanvas(id of the canvas)。我怎样才能做到这一点?

在此处找到 jsfiddle 链接:http://jsfiddle.net/yLL48one/

最佳答案

查看更新的 fiddle :http://jsfiddle.net/yLL48one/1/

关键行是:

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

关于javascript - 如何将div背景设置为 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30365902/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com