canvas绘图_erciyuanfulitu

jmtt
jmtt
https://cm365.club/FqUf58
http://jmcomic.one/
5 随机数储存

<p id='show'>None</p>
<canvas style='border:1px solid;width:270'id='mcvs'  width=300 height=300></canvas>
<img style='visibility:hidden' id='img' src="https://img5.51tietu.net/pic/2019-080802/xr0s03fp520xr0s03fp520.jpg" alt="20160418_193134_007" width="777" height="808" />
<script>
var fgs50=[[9,10],[3,9],[7,15],[0,14],[6,11],[3,15],[14,2],[10,2],[4,5],[10,6],[12,12],[10,7],[0,10],[8,6],[13,8],[8,8],[6,10],[14,3],[4,12],[9,12],[9,9],[6,4],[9,7],[0,9],[2,5],[12,8],[9,8],[5,15],[13,14],[14,0],[8,11],[8,3],[5,9],[13,6],[6,8],[0,12],[8,9],[5,7],[6,2],[0,2],[6,12],[11,15],[4,2],[9,11],[0,5],[1,13],[14,8],[0,13],[9,13],[0,11],[1,8],[11,12],[6,14],[2,15],[8,2],[1,7],[11,3],[5,6],[0,15],[11,9],[5,12],[13,10],[11,14],[5,10],[14,11],[1,10],[11,6],[3,14],[13,7],[6,0],[5,5],[8,4],[8,10],[11,5],[10,10],[6,3],[14,5],[5,13],[8,15],[14,4],[12,5],[4,3],[12,13],[4,7],[14,13],[12,6],[5,8],[6,9],[3,4],[4,13],[1,14],[3,2],[12,0],[3,3],[7,2],[3,1],[10,14],[5,2],[5,1],[11,7],[9,14],[6,1],[11,11],[10,4],[3,13],[14,1],[4,8],[14,14],[2,4],[7,14],[2,3],[2,1],[13,4],[3,12],[3,7],[1,4],[12,10],[6,6],[14,12],[14,9],[1,3],[7,11],[1,0],[11,4],[5,4],[1,12],[12,9],[13,15],[10,13],[1,11],[4,11],[7,4],[2,2],[7,12],[13,9],[7,6],[11,10],[10,12],[10,15],[2,7],[13,11],[12,15],[14,7],[7,1],[1,5],[13,5],[10,3],[13,3],[7,10],[2,11],[3,0],[12,14],[9,0],[7,5],[4,10],[10,8],[1,9],[1,15],[8,7],[0,4],[12,1],[5,0],[2,8],[5,3],[4,15],[2,12],[9,5],[13,2],[9,2],[4,14],[1,2],[2,10],[13,1],[10,11],[0,7],[0,8],[2,0],[0,6],[8,14],[0,0],[12,3],[1,6],[2,6],[6,7],[3,5],[0,3],[10,5],[9,3],[8,1],[14,10],[11,1],[4,1],[4,6],[2,13],[13,12],[3,11],[12,11],[6,5],[13,0],[3,8],[4,9],[7,7],[9,15],[14,6],[10,1],[0,1],[8,0],[7,8],[6,13],[6,15],[3,10],[10,0],[11,0],[11,13],[9,4],[2,9],[2,14],[11,8],[12,4],[5,11],[7,13],[10,9],[13,13],[14,15],[9,6],[8,12],[7,9],[7,3],[4,4],[7,0],[8,13],[4,0],[1,1],[5,14],[8,5],[12,2],[3,6],[9,1],[11,2],[12,7]];   
var gogg=null;
img.onload=function(){
//img.width=img.width/3;img.height=img.height/3
let ctx=mcvs.getContext('2d');
//ctx.drawImage(img,400,200,200,200,0,0,100,100)
let fgs=20;
let w=img.width,h=img.height,fg=fgs,dfg=fgs,dcol=parseInt(w/fg),xfgs=parseInt(w/fg),yfgs=parseInt(h/fg);
mcvs.width=w;mcvs.height=h
let iarr=[];for(let a=0;a<xfgs*yfgs;a++){iarr.push([a%xfgs,(a-a%xfgs)/xfgs])}
daoxuf(iarr);suijif(iarr)
let str='[';for(let a=0;a<iarr.length;a++){str+='['+iarr[a]+']';if(a<iarr.length-1){str+=','}};str+=']';
show.innerHTML=str;
let fn=0;gogg=gog;
let siv=setInterval('gogg()',0);
function gog(){/*show.innerHTML=fn;*/let a=fn;if(fn<iarr.length){fn++}else{clearInterval(siv)};let sx=iarr[a][0]*fg,sy=iarr[a][1]*fg,dpos=topos(a,dcol),dx=dpos[0]*dfg,dy=dpos[1]*dfg;ctx.drawImage(img,sx,sy,fg,fg,dx,dy,dfg,dfg);ctx.strokeRect(dx,dy,dfg,dfg);/*ctx.strokeText(a,dx+15,dy+15);*/}
}
function topos(n,col){ return [n%col,(n-n%col)/col] }
function daoxuf(arr){let al=arr.length-1;for(let a=0;a<arr.length/2;a++){let temp=arr[a];arr[a]=arr[al-a];arr[al-a]=temp}}
function suijif(arr){for(let a=0;a<arr.length;a++){let rm=Math.floor(Math.random()*arr.length);let temp=arr[a];arr[a]=arr[rm];arr[rm]=temp;}}
</script>

4

<p id='show'>None</p>
<canvas style='border:1px solid;width:270'id='mcvs'  width=300 height=300></canvas>
<img style='visibility:hidden' id='img' src="https://img5.51tietu.net/pic/2019-080802/xr0s03fp520xr0s03fp520.jpg" alt="20160418_193134_007" width="777" height="808" />
<script>
var gogg=null;
img.onload=function(){
//img.width=img.width/3;img.height=img.height/3
let ctx=mcvs.getContext('2d');
//ctx.drawImage(img,400,200,200,200,0,0,100,100)
let fgs=50;
let w=img.width,h=img.height,fg=fgs,dfg=fgs,dcol=parseInt(w/fg),xfgs=parseInt(w/fg),yfgs=parseInt(h/fg);
mcvs.width=w;mcvs.height=h
let iarr=[];for(let a=0;a<xfgs*yfgs;a++){iarr.push([a%xfgs,(a-a%xfgs)/xfgs])}
daoxuf(iarr);suijif(iarr)
let fn=0;gogg=gog;
let siv=setInterval('gogg()',50);
function gog(){show.innerHTML=fn;let a=fn;if(fn<iarr.length){fn++}else{clearInterval(siv)};let sx=iarr[a][0]*fg,sy=iarr[a][1]*fg,dpos=topos(a,dcol),dx=dpos[0]*dfg,dy=dpos[1]*dfg;ctx.drawImage(img,sx,sy,fg,fg,sx,sy,dfg,dfg);ctx.strokeRect(sx,sy,dfg,dfg);/*ctx.strokeText(a,dx+15,dy+15);*/}
}
function topos(n,col){ return [n%col,(n-n%col)/col] }
function daoxuf(arr){let al=arr.length-1;for(let a=0;a<arr.length/2;a++){let temp=arr[a];arr[a]=arr[al-a];arr[al-a]=temp}}
function suijif(arr){for(let a=0;a<arr.length;a++){let rm=Math.floor(Math.random()*arr.length);let temp=arr[a];arr[a]=arr[rm];arr[rm]=temp;}}
</script>

3 间歇绘制

<p id='show'>None</p>
<canvas style='border:1px solid'id='mcvs'  width=300 height=300></canvas>
<img style='visibility:hidden' id='img' src="https://img5.51tietu.net/pic/2019-080802/xr0s03fp520xr0s03fp520.jpg" alt="20160418_193134_007" width="777" height="808" />
<script>
var gogg=null;
img.onload=function(){
//img.width=img.width/3;img.height=img.height/3
let ctx=mcvs.getContext('2d');
//ctx.drawImage(img,400,200,200,200,0,0,100,100)
let fgs=50;
let w=img.width,h=img.height,fg=fgs,dfg=fgs,dcol=parseInt(w/fg),xfgs=parseInt(w/fg),yfgs=parseInt(h/fg);
mcvs.width=w;mcvs.height=h
let iarr=[];for(let a=0;a<xfgs*yfgs;a++){iarr.push([a%xfgs,(a-a%xfgs)/xfgs])}
//daoxuf(iarr);/*suijif(iarr)*/
let fn=0;gogg=gog;
let siv=setInterval('gogg()',50);
function gog(){show.innerHTML=fn;let a=fn;if(fn<iarr.length){fn++}else{clearInterval(siv)};let sx=iarr[a][0]*fg,sy=iarr[a][1]*fg,dpos=topos(a,dcol),dx=dpos[0]*dfg,dy=dpos[1]*dfg;ctx.drawImage(img,sx,sy,fg,fg,dx,dy,dfg,dfg);ctx.strokeRect(dx,dy,dfg,dfg);/*ctx.strokeText(a,dx+15,dy+15);*/}
}
function topos(n,col){ return [n%col,(n-n%col)/col] }
function daoxuf(arr){let al=arr.length-1;for(let a=0;a<arr.length/2;a++){let temp=arr[a];arr[a]=arr[al-a];arr[al-a]=temp}}
function suijif(arr){for(let a=0;a<arr.length;a++){let rm=Math.floor(Math.random()*arr.length);let temp=arr[a];arr[a]=arr[rm];arr[rm]=temp;}}
</script>

2 倒序和随机

<canvas style='border:1px solid'id='mcvs'  width=300 height=300></canvas>
<img style='visibility:hidden' id='img' src="https://img5.51tietu.net/pic/2019-080802/xr0s03fp520xr0s03fp520.jpg" alt="20160418_193134_007" width="777" height="808" />
<script>
img.onload=function(){
//img.width=img.width/3;img.height=img.height/3
let ctx=mcvs.getContext('2d');
//ctx.drawImage(img,400,200,200,200,0,0,100,100)
let fgs=10;
let w=img.width,h=img.height,fg=fgs,dfg=fgs,dcol=parseInt(w/fg),xfgs=parseInt(w/fg),yfgs=parseInt(h/fg);
mcvs.width=w;mcvs.height=h
let iarr=[];for(let a=0;a<xfgs*yfgs;a++){iarr.push([a%xfgs,(a-a%xfgs)/xfgs])}
daoxuf(iarr);suijif(iarr)
for(let a=0;a<iarr.length;a++){
let sx=iarr[a][0]*fg,sy=iarr[a][1]*fg,dpos=topos(a,dcol),dx=dpos[0]*dfg,dy=dpos[1]*dfg
ctx.drawImage(img,sx,sy,fg,fg,dx,dy,dfg,dfg)
ctx.strokeRect(dx,dy,dfg,dfg);//ctx.strokeText(a,dx+15,dy+15);
}
}
function topos(n,col){ return [n%col,(n-n%col)/col] }
function daoxuf(arr){let al=arr.length-1;for(let a=0;a<arr.length/2;a++){let temp=arr[a];arr[a]=arr[al-a];arr[al-a]=temp}}
function suijif(arr){for(let a=0;a<arr.length;a++){let rm=Math.floor(Math.random()*arr.length);let temp=arr[a];arr[a]=arr[rm];arr[rm]=temp;}}

</script>

1

<canvas id='mcvs'  width=300 height=300></canvas>
<img id='img' src="https://img5.51tietu.net/pic/2019-080802/xr0s03fp520xr0s03fp520.jpg" alt="20160418_193134_007" width="777" height="808" />
<script>
img.onload=function(){
img.width=img.width/3;img.height=img.height/3
let ctx=mcvs.getContext('2d');
ctx.drawImage(img,400,200,200,200,0,0,100,100)
}
</script>