<div style="width:200px;height:200px;" id="cloud">红心是我的背景图！</div>

<canvas style="display:none;" id="can" width="200" height="200"></canvas>

<script>

(function() {

    var canvas = document.getElementById('can'), context;

    if(!canvas.getContext) {

        alert('你的浏览器不支持 canvas!');

        return;

    }

    context = canvas.getContext('2d');

    context.fillStyle = 'red';

    context.beginPath();

    context.moveTo(75,40);

    context.bezierCurveTo(75,37,70,25,50,25);

    context.bezierCurveTo(20,25,20,62.5,20,62.5);

    context.bezierCurveTo(20,80,40,102,75,120);

    context.bezierCurveTo(110,102,130,80,130,62.5);

    context.bezierCurveTo(130,62.5,130,25,100,25);

    context.bezierCurveTo(85,25,75,37,75,40);

    context.fill();

    document.getElementById('cloud').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';

})();

</script>