<!doctype html>window.onload=function (){ varOC = document.getElementById (' C1 '); varOGC = Oc.getcontext (' 2d '); varAli = document.getElementsByTagName (' li '); for(vari = 0; i < ali.length; i++) {Ali[i].onclick=function () { varstr = This. InnerHTML; varh = 180; Ogc.clearrect (0,0, Oc.width,oc.height); Ogc.font= h + ' px impact '; Ogc.fillstyle= ' Red '; Ogc.textbaseline= ' Top '; varW =Ogc.measuretext (str). width; Ogc.filltext (str, (Oc.width-W)/2, (OC.HEIGHT-H)/2); varOimg = Ogc.getimagedata ((oc.width-w)/2, (OC.HEIGHT-H)/2, w,h); Ogc.clearrect (0,0, Oc.width,oc.height); vararr = Randnum (W*H,W*H/10);varNewimg =Ogc.createimagedata (w,h) for(vari = 0; I <arr.length; i++) {Newimg.data[arr[i]] = Oimg.data[arr[i]*4]; Newimg.data[arr[i]+ 1] = oimg.data[arr[i]*4 + 1]; Newimg.data[arr[i]+ 2] = oimg.data[arr[i]*4 + 2]; Newimg.data[arr[i]+ 3] = oimg.data[arr[i]*4 + 3]; } ogc.putimagedata (Newimg, (Oc.width-W)/2, (OC.HEIGHT-H)/2); } } functionRandnum (iall,inow) {vararr = []; varNewarr = []; for(vari = 0; i < Iall; i++) {Arr.push (i); } for(vari = 0; i< Inow; i++) {Newarr.push (Arr.splice (Math.floor) (Math.random ()*arr.length), 1)); } returnNewarr}}</script><style>body{Background:pink; } #c1 {background:white; } </style>HTML5 canvas pixel random 10% display