Front_end/tupian.html at master · CodeBall/Front_end · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var image;
        var intervalId1;
        var intervalId2;
        var intervalId3;
        var drawW1 = 0;
        var canvas;
        var context;
        var drawLeft;

        var baiyechuangItemW ;
        function init(){
            image = new Image();
            /*获取图片路径*/
            image.src="dimg/css3.png";
            /*捕获图片显示的id*/
            canvas = document.getElementById("canvas1");
            context = canvas.getContext("2d");
            drawLeft = image.width/2;

        }

        function startLeftToRight(){
            clearInterval(intervalId1);
            context.clearRect(0,0,image.width,image.height);
            intervalId1 = setInterval("leftToRight();",100);
        }

        function leftToRight(){
            context.drawImage(image,0,0,drawW1, image.height,0,0,drawW1,image.height);
            drawW1 += 2;
            if(drawW1>image.width){
                drawW1 =0;
                clearInterval(intervalId1);
            }
        }

    </script>
</head>
<body onload="init();">
<div>
    <canvas id="canvas1" width="665px" height="195px" background-color="yellow">
        <script type="text/javascript">window.onload=startLeftToRight();</script>
    </canvas>
</div>
</body
</html>