一个画布，两个dom元素？

Question

是否可以让两个dom元素引用同一个画布，这样一个画布会显示在两个地方，而不需要第二个画布？

Answer 1

当然！

使用html5画布数据网址作为多个元素的背景：

$('.bk').css('background-image','url('+canvas.toDataURL()+')');

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

ctx.fillStyle='skyblue';
ctx.strokeStyle='gray';
ctx.lineWidth=3;
ctx.beginPath();
ctx.arc(50,50,40,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.stroke();

$('.bk').css('background-image','url('+canvas.toDataURL()+')');

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
.bk{width:100px;height:100px;border:1px solid green;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Canvas</h4>
<canvas id="canvas" width=100 height=100></canvas>
<h4>Two Divs containing the same canvas background</h4>
<div class=bk>One</div>
<div class=bk>Two</div>

＆＃13;

＆＃13;

＆＃13;