html5 canvas程序演示--P1197 [JSOI2008]星球大战
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： 复制
8 13 0 1 1 6 6 5 5 0 0 6 1 2 2 3 3 4 4 5 7 1 7 2 7 6 3 6 5 1 6 3 5 7
输出样例#1： 复制
1 1 1 2 3 3
说明
[JSOI2008]