一个画布，两个 dom 元素？

Question

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

Answer 1

好的！

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

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

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()+')');

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

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