用javascript绘制笑脸，半透明div显示

Question

在这里，我创建了代码潘小提琴，以显示欢迎信息在我的主页。

我想让semitransparent attractive div with welcome smiley看看。它应该出现15秒，然后自动消失。

小提琴：链接到Codepan

问题：

1. 微笑的风格出现在悲伤的表情中。我改变了半径和其他参数，但没有表示欢迎或微笑。
2. 欢迎信息应该出现在笑脸旁边。现在，这两种情况都不起作用。
3. 整个div应该像水彩一样透明。改变和尝试不同的颜色并不会给它带来
4. 整个div应该在页面加载15秒后消失，但它每1秒发生一次。 $( document ).ready(函数(){$(‘d1’).fadeOut()；$(‘d1’)..val=‘’；},150000)；

任何帮助都是非常感谢的。

Answer 1

您可以这样做，在15秒钟的页面加载之后，带有欢迎信息的笑脸就会消失。

<div id="d1" style="height:100px; width:100px; background-color:white">
  <div id="mydiv" style="display:none">
    <table>
      <tr>
        <td>
          <canvas id="myDrawing" width="200" height="200" style="border:1px solid #EEE">
          </canvas> 
        </td>
        <td>
          <p style="position:absolute; background-color:rgba(255,0,255,0.5);; filter:alpha(opacity=50); opacity:.5; padding:5px">
           welcome to xyz.com! 
           Please review the site and give your valuable feedback.
         </p>
       </td>
      </tr>
  </table>
  </div>
</div>

JS

$( document ).ready(function() {
//var canvas = document.getElementById("myDrawing");
var a_canvas = document.getElementById("myDrawing");
var context = a_canvas.getContext("2d");
// Draw the face
context.fillStyle = "yellow";
context.beginPath();
context.arc(95, 85, 40, 0, 2*Math.PI);
context.closePath();
context.fill();
context.lineWidth = 2;
context.stroke();
context.fillStyle = "black";
// Draw the left eye
context.beginPath();
context.arc(75, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();
// Draw the right eye
context.beginPath();
context.arc(114, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();
// Draw the mouth
context.beginPath();
context.arc(95, 95, 17, Math.PI , 2*Math.PI,true);
context.closePath();
context.fill();
// Write "Hello, World!"
context.font = "20px Garamond";
context.fillText("welcome to xyz.com! ",15,175);
$( "#mydiv" ).fadeIn( 15000, function() {
$( "#myDrawing" ).fadeIn( 15000 );
});

}); 

工作小提琴-到处玩

Answer 2

使用Javascript .setInterval()函数执行以下操作：

$( document ).ready(function() {
  window.setInterval(function(){
     $( "#d1" ).fadeOut( "slow", function() {
       //Do things when Animation is complete.
      }); 
  },15000);
});