html5 canvas程序演示--P1197 [JSOI2008]星球大战

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>html5程序演示--P1197 [JSOI2008]星球大战</title>
  6     <style type="text/css">
  7         input{
  8             width: 100px;
  9             height: 30px;
 10             border-radius: 20px;
 11             margin: 2px;
 12             outline: none;
 13         }
 14     </style>
 15 </head>
 16 
 17 <body>
 18     <canvas id="mycanvas" width="800" height="520" style="float: left;background: #A9A9A9">
 19             很抱歉，您的浏览器暂不支持HTML5的canvas
 20     </canvas>
 21     <div style="display: flex;flex-direction:column">
 22         <input type="button" id="init" value="正向初始状态" onClick="initStarWar()">
 23         <input type="button" id="reverse" value="反向初始状态" onClick="reverseInit()">
 24         <input type="button" id="before"  value="上一步" onClick="beforeStep()">
 25         <input type="button" id="next"  value="下一步" onClick="nextStep()">
 26     </div>
 27     <script>
 28         var context;
 29         //设置画布Canvas相关属性
 30         function loadCanvas(){
 31             //定义变量获取画布DOM
 32             var canvas=document.getElementById("mycanvas");
 33             //设置绘画环境为2d
 34             context=canvas.getContext("2d");
 35             context.lineWidth=3;
 36             context.strokeStyle="#3A7BFC";
 37             context.fillStyle="#987654";
 38             context.font="20px 隶书";
 39             context.save();
 40         }
 41         loadCanvas();
 42         //画直线，画以太隧道
 43         function drawLine(x1,y1,x2,y2){
 44 //            context.strokeStyle="#3A7BFC";
 45             context.beginPath();
 46             context.moveTo(x1,y1);
 47             //用lineTo设置终点
 48             context.lineTo(x2,y2);
 49             //开始画线
 50             context.stroke();
 51             context.closePath();
 52         }
 53         drawLine(250,250,100,300);
 54         drawLine(350,350,100,300);
 55         //画圆圈，画星球
 56         function drawCircle(x,y,number){
 57             var radius=15;
 58 
 59             
 60             context.fillStyle="#A9A9A9";
 61             context.beginPath();
 62             //画圆圈
 63             context.arc(x,y,radius,0,Math.PI*2);
 64             //写文字
 65             context.fillText(number,x-4,y+7);
 66             //开始画线
 67             
 68             context.fill();
 69             context.stroke();
 70             context.closePath();
 71             context.beginPath();
 72             context.fillStyle="#987654";
 73             //写文字
 74             context.fillText(number,x-4,y+7);
 75             context.closePath();
 76             
 77         }
 78 
 79             
 80         drawCircle(130,130,5);
 81         context.clearRect(0,0,800,600);
 82         //数组操作，找到每一个星球
 83         var star=new Array();
 84         star[0]=[80,70,0];
 85         star[1]=[380,120,5];
 86         star[2]=[380,220,0];
 87         star[3]=[530,270,3];
 88         star[4]=[380,320,0];
 89         star[5]=[440,480,2];
 90         star[6]=[680,70,4];
 91         star[7]=[530,170,1];
 92 //        drawCircle(star[0][0],star[0][1],0);
 93         
 94 //        context.globalCompositeOperation="xor";
 95         var edge=[[7,2,1],[5,0,2],[4,5,2],[2,3,3],[3,4,3],[6,5,4],[0,6,4],[7,6,4],[3,6,4],[0,1,5],[1,6,5],[1,2,5],[7,1,5]];
 96         
 97         //记录状态的变量step
 98         var step=5;
 99         
100         //初始化星球大战
101         function initStarWar(){
102             context.clearRect(0,0,800,600);
103             step=5;
104 //            alert(step);
105             for(var i=0;i<13;i++){
106                 var begin=edge[i][0];
107                 var end=edge[i][1];
108                 drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);
109             }
110             for(var i=0;i<8;i++){
111                 drawCircle(star[i][0],star[i][1],i);
112             }
113         }
114         initStarWar();
115         //反向初始状态
116         function reverseInit(){
117             context.clearRect(0,0,800,600);
118             step=0;
119 //            alert(step);
120             for(var i=0;i<13;i++){
121                 if(edge[i][2]==0){
122                     var begin=edge[i][0];
123                     var end=edge[i][1];
124                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);
125                 }
126             }
127             for(var i=0;i<8;i++){
128                 if(star[i][2]==0){
129                     drawCircle(star[i][0],star[i][1],i);
130                 }
131             }
132         }
133 //        reverseInit();
134         //下一步
135         function nextStep(){
136             context.clearRect(0,0,800,600);
137             step++;
138             if(step>=5) step=5;
139 //            alert(step);
140             for(var i=0;i<13;i++){
141                 if(edge[i][2]<=step){
142                     var begin=edge[i][0];
143                     var end=edge[i][1];
144                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);
145                 }
146                 if(edge[i][2]==step){
147                     context.save();
148                     context.strokeStyle="#FF0000";
149                     context.fillStyle="#FF0000";
150                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);
151                     context.restore();
152                 }
153             }
154             for(var i=0;i<8;i++){
155                 if(star[i][2]<=step){
156                     drawCircle(star[i][0],star[i][1],i);
157                 }
158                 if(star[i][2]==step){
159                     context.save();
160                     context.strokeStyle="#FF0000";
161                     context.fillStyle="#FF0000";
162                     drawCircle(star[i][0],star[i][1],i);
163                     context.restore();
164                 }
165             }
166         }
167         //上一步
168         function beforeStep(){
169             context.clearRect(0,0,800,600);
170             step--;
171             if(step<=0) step=0;
172 //            alert(step);
173             for(var i=0;i<13;i++){
174                 if(parseInt(edge[i][2])<=step){
175                     var begin=edge[i][0];
176                     var end=edge[i][1];
177                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);
178                 }
179                 if(edge[i][2]==step){
180                     context.save();
181                     context.strokeStyle="#FF0000";
182                     context.fillStyle="#FF0000";
183                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);
184                     context.restore();
185                 }
186             }
187             for(var i=0;i<8;i++){
188                 if(parseInt(star[i][2])<=step){
189                     drawCircle(star[i][0],star[i][1],i);
190                 }
191                 if(star[i][2]==step){
192                     context.save();
193                     context.strokeStyle="#FF0000";
194                     context.fillStyle="#FF0000";
195                     drawCircle(star[i][0],star[i][1],i);
196                     context.restore();
197                 }
198             }
199         }
200     </script>
201 
202 </body>
203 </html>

对应的题目

题目描述

很久以前，在一个遥远的星系，一个黑暗的帝国靠着它的超级武器统治者整个星系。某一天，凭着一个偶然的机遇，一支反抗军摧毁了帝国的超级武器，并攻下了星系中几乎所有的星球。这些星球通过特殊的以太隧道互相直接或间接地连接。

但好景不长，很快帝国又重新造出了他的超级武器。凭借这超级武器的力量，帝国开始有计划地摧毁反抗军占领的星球。由于星球的不断被摧毁，两个星球之间的通讯通道也开始不可靠起来。现在，反抗军首领交给你一个任务：给出原来两个星球之间的以太隧道连通情况以及帝国打击的星球顺序，以尽量快的速度求出每一次打击之后反抗军占据的星球的连通快的个数。（如果两个星球可以通过现存的以太通道直接或间接地连通，则这两个星球在同一个连通块中）。

输入输出格式

输入格式：

输入文件第一行包含两个整数，N (1 <= N <= 2M) 和M (1 <= M <= 200,000)，分别表示星球的数目和以太隧道的数目。星球用0~N-1的整数编号。

接下来的M行，每行包括两个整数X, Y，其中（0<=X<>Y<N），表示星球X和星球Y之间有以太隧道。注意所有的以太隧道都是双向的。

接下来一行是一个整数K，表示帝国计划打击的星球个数。

接下来的K行每行一个整数X，满足0<=X<N，表示帝国计划打击的星球编号。帝国总是按输入的顺序依次摧毁星球的。

输出格式：

输出文件的第一行是开始时星球的连通块个数。

接下来的K行，每行一个整数，表示经过该次打击后现存星球的连通块个数。

输入输出样例

输入样例#1：复制

输出样例#1：复制

说明

[JSOI2008]