canvas 轮播图片
【摘要】 这个有播放按钮，websocket传输：
https://www.cnblogs.com/God-Shell/articles/3400649.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titl...
这个有播放按钮，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>
文章来源: blog.csdn.net，作者：网奇，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jacke121/article/details/88068879
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）