canvas 轮播图片

这个有播放按钮，websocket传输：
https://www.cnblogs.com/God-Shell/articles/3400649.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type='text/javascript' src='/static/js/jquery-3.1.1.js'></script>

</head>
<body>
{#   <div id ="div1"></div>#}
{#    <img  id="divPic" />#}
<canvas id="divPic"  width="1024" height="768" style="border:1px solid #ccc;margin:20px auto;display: block;">
        当前浏览器不支持canvas
        <!-- 如果浏览器支持canvas，则canvas标签里的内容不会显示出来 -->
</canvas>

<script>
  var c=0;
 var imgObj = new Image();
        function showLogin() {

            {#$('#divPic').attr('src',null);#}
            {#$("<img id='divPic'/>").appendTo($("#div1"));#}
         var img_url = "{{ url_for('get_code', _external=True) }}";
         console.log(img_url);

          //获取canvas元素
        var cvs = document.getElementById("divPic");
        //创建image对象
        imgObj.src = img_url+"?"+ Math.random();
        //待图片加载完后，将其显示在canvas上
        imgObj.onload = function(){
                var ctx = cvs.getContext('2d');
                ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小：470*480
                //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
            }

           // $('#divPic').attr("src", img_url+"?"+ Math.random());
        }
    $(document).ready(function(){
        //点击验证码刷新，主要采取重设src属性，属性每次都要不一样，所以在网址后面增加参数
        {#$("img").click(function(){#}
        setInterval(showLogin,200);

        var t1=window.setTimeout(refreshCount, 1000 * 5);
function refreshCount() {
  console.log("ready");
}
//去掉定时器的方法
window.clearTimeout(t1);
        //});
    });



    {#$('#divPic').onload(function () {#}
    {#    for(var i=0,j=10;i<j;i++) {#}
    {#        window.location.reload(100);#}
    {#        document.getElementById('divPic').src = '/code';#}
    {#     }#}
    {# })#}


</script>

</body>
</html>
猜你喜欢
