javascript 动态画直线

最新推荐文章于 2020-06-29 17:09:02 发布

大米粥哥哥

最新推荐文章于 2020-06-29 17:09:02 发布

阅读量4.2k

点赞数 2

分类专栏： # javascript 文章标签： javascript 动态直线

本文链接：https://blog.csdn.net/qq_38204686/article/details/78576947

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!-- javascript 动态画直线 -->  
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>测试</title>  
        <style>  
        canvas{  
            background: lawngreen;//画布背景色  
              }  
        </style>  
    </head>  
<body>  
    <canvas id="gycanvas" width="300" height="300" ></canvas>  
    <script>  
        //铺满屏幕  
        var width = document.documentElement.clientWidth;  
        var height = document.documentElement.clientHeight;  
        document.getElementById("gycanvas").setAttribute("width",width);  
        document.getElementById("gycanvas").setAttribute("height",height);  
  
        //初始化    
        var x0 = width/2;  
        var y0 = height/2;  
        var context = document.getElementById("gycanvas").getContext("2d");  
        context.fillStyle = "red"; 　  
        var x=0;
		var stop;

		//动态的画线
        function drawline()
		{
			context.fillRect(x,y0,1,1); 
            x=x+1;
			if(x==x0)
			{
				//线画到中点就停止画
				clearInterval(stop);
			}
		}
		//每十毫秒画一次线
		stop=setInterval(drawline,10);  

    </script>  
</body>  
  
</html>