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

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>html5程序演示--P1197 [JSOI2008]星球大战</title>

     <style type="text/css">

         input{

             width: 100px;

             height: 30px;

             border-radius: 20px;

             margin: 2px;

             outline: none;

         }

     </style>

 </head>

 <body>

     <canvas id="mycanvas" width="800" height="520" style="float: left;background: #A9A9A9">

             很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <div style="display: flex;flex-direction:column">

         <input type="button" id="init" value="正向初始状态" onClick="initStarWar()">

         <input type="button" id="reverse" value="反向初始状态" onClick="reverseInit()">

         <input type="button" id="before"  value="上一步" onClick="beforeStep()">

         <input type="button" id="next"  value="下一步" onClick="nextStep()">

     </div>

     <script>

         var context;

         //设置画布Canvas相关属性

         function loadCanvas(){

             //定义变量获取画布DOM

             var canvas=document.getElementById("mycanvas");

             //设置绘画环境为2d

             context=canvas.getContext("2d");

             context.lineWidth=3;

             context.strokeStyle="#3A7BFC";

             context.fillStyle="#987654";

             context.font="20px 隶书";

             context.save();

         }

         loadCanvas();

         //画直线，画以太隧道

         function drawLine(x1,y1,x2,y2){

 //            context.strokeStyle="#3A7BFC";

             context.beginPath();

             context.moveTo(x1,y1);

             //用lineTo设置终点

             context.lineTo(x2,y2);

             //开始画线

             context.stroke();

             context.closePath();

         }

         drawLine(250,250,100,300);

         drawLine(350,350,100,300);

         //画圆圈，画星球

         function drawCircle(x,y,number){

             var radius=15;

             context.fillStyle="#A9A9A9";

             context.beginPath();

             //画圆圈

             context.arc(x,y,radius,0,Math.PI*2);

             //写文字

             context.fillText(number,x-4,y+7);

             //开始画线

             context.fill();

             context.stroke();

             context.closePath();

             context.beginPath();

             context.fillStyle="#987654";

             //写文字

             context.fillText(number,x-4,y+7);

             context.closePath();

         }

         drawCircle(130,130,5);

         context.clearRect(0,0,800,600);

         //数组操作，找到每一个星球

         var star=new Array();

         star[0]=[80,70,0];

         star[1]=[380,120,5];

         star[2]=[380,220,0];

         star[3]=[530,270,3];

         star[4]=[380,320,0];

         star[5]=[440,480,2];

         star[6]=[680,70,4];

         star[7]=[530,170,1];

 //        drawCircle(star[0][0],star[0][1],0);

 //        context.globalCompositeOperation="xor";

         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]];

         //记录状态的变量step

         var step=5;

         //初始化星球大战

         function initStarWar(){

             context.clearRect(0,0,800,600);

             step=5;

 //            alert(step);

             for(var i=0;i<13;i++){

                 var begin=edge[i][0];

                 var end=edge[i][1];

                 drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);

             }

             for(var i=0;i<8;i++){

                 drawCircle(star[i][0],star[i][1],i);

             }

         }

         initStarWar();

         //反向初始状态

         function reverseInit(){

             context.clearRect(0,0,800,600);

             step=0;

 //            alert(step);

             for(var i=0;i<13;i++){

                 if(edge[i][2]==0){

                     var begin=edge[i][0];

                     var end=edge[i][1];

                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);

                 }

             }

             for(var i=0;i<8;i++){

                 if(star[i][2]==0){

                     drawCircle(star[i][0],star[i][1],i);

                 }

             }

         }

 //        reverseInit();

         //下一步

         function nextStep(){

             context.clearRect(0,0,800,600);

             step++;

             if(step>=5) step=5;

 //            alert(step);

             for(var i=0;i<13;i++){

                 if(edge[i][2]<=step){

                     var begin=edge[i][0];

                     var end=edge[i][1];

                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);

                 }

                 if(edge[i][2]==step){

                     context.save();

                     context.strokeStyle="#FF0000";

                     context.fillStyle="#FF0000";

                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);

                     context.restore();

                 }

             }

             for(var i=0;i<8;i++){

                 if(star[i][2]<=step){

                     drawCircle(star[i][0],star[i][1],i);

                 }

                 if(star[i][2]==step){

                     context.save();

                     context.strokeStyle="#FF0000";

                     context.fillStyle="#FF0000";

                     drawCircle(star[i][0],star[i][1],i);

                     context.restore();

                 }

             }

         }

         //上一步

         function beforeStep(){

             context.clearRect(0,0,800,600);

             step--;

             if(step<=0) step=0;

 //            alert(step);

             for(var i=0;i<13;i++){

                 if(parseInt(edge[i][2])<=step){

                     var begin=edge[i][0];

                     var end=edge[i][1];

                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);

                 }

                 if(edge[i][2]==step){

                     context.save();

                     context.strokeStyle="#FF0000";

                     context.fillStyle="#FF0000";

                     drawLine(star[begin][0],star[begin][1],star[end][0],star[end][1]);

                     context.restore();

                 }

             }

             for(var i=0;i<8;i++){

                 if(parseInt(star[i][2])<=step){

                     drawCircle(star[i][0],star[i][1],i);

                 }

                 if(star[i][2]==step){

                     context.save();

                     context.strokeStyle="#FF0000";

                     context.fillStyle="#FF0000";

                     drawCircle(star[i][0],star[i][1],i);

                     context.restore();

                 }

             }

         }

     </script>

 </body>

 </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]