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）