Canvas资源管理代码笔记(个人)_canvas作品静态代码及注释简单-优快云博客

本文链接：https://blog.youkuaiyun.com/Webghost511/article/details/98793964

这则是博主canvas打卡记录，代码在这里没有详细的注释，如果没有帮助，请出门?转 (^_）！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{
                padding: 0;
                margin: 0;
            }
            canvas{
                border: 1px blueviolet solid;
            }
            body{
                /* background-color: black; */
                overflow: hidden;
            }
    </style>
</head>
<body>
        <canvas></canvas>
        <script type="text/javascript">
            var mycanvas = document.querySelector('canvas');
            var ctx=mycanvas.getContext('2d')
            //设置画布满屏
            mycanvas.width=document.documentElement.clientWidth;
            mycanvas.height=document.documentElement.clientHeight;
            var imgdata={};
            var xhr=new XMLHttpRequest();  //to do
            xhr.onreadystatechange=function(){ //to do
                if(xhr.readyState==4){
                    var rjson = JSON.parse(xhr.responseText) //转换为JSON格式
                    for(var i=0 ; i < rjson.images.length ; i++){
                        imgdata[rjson.images[i].name] =new Image();
                        imgdata[rjson.images[i].name].src =rjson.images[i].url;
                        imgdata[rjson.images[i].name].onload=function(){
                            start();
                        }
                    }
                    console.log(imgdata)
                }
            }
            xhr.open("GET","imgdata.json",true) //to do
            xhr.send(null) //todo
            function start(){
                setInterval(() => {
                    ctx.clearRect(0,0,mycanvas.width,mycanvas.height)
                    ctx.drawImage(imgdata.movie,0,115*2,125,125,100,100,125,125)
                }, 20);
            }
       </script> 
</body>
</html>

请多多支持511其他的博客噢，谢谢大家
(∩_∩) (∩_∩) (∩_∩)