这是我的代码:
<!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/