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>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AI算法网奇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值