javascript+canvasιο齱Ч_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> *{ margin:0; padding:0;} .cjbox{ margin:100px; height:80px; width:200px; background:#FFF; position:relative;} #canvas{position:absolute; left:0px; top:0px;z-index:99;} .sjmes{ position:absolute; left:0px; top:0px; height:80px; width:200px; text-align:center; font-size:40px; line-height:80px; z-index:9;} </style> <title>demo1</title> </head> <body> <div> <div>ιο齱</div> <div> <div></div> <canvas width=200 height=80></canvas> </div> </div> </body> <script type="text/javascript"> //init var cjcon=["","","","лл"];// var cjper=[3,10,20,100];// /* * sjmes * @Author 1530341234@qq.com * @param {cjcon} н */ var percjcon=[]; for(var i=0;i<cjper.length;i++){ peic(cjper[i],i); }; function peic(len,ind){ for(var i=0;i<len;i++){ percjcon.push(cjcon[ind]); }; }; var sjmes = document.getElementById("sjmes"); var numrandom=Math.floor(Math.random()*percjcon.length); sjmes.innerHTML=percjcon[numrandom]; var opacityb=0.5;//,ο, var backcolorb="#ffaaaa"; var numl=200*80;// var nump;//backcolorb var opacitya;// var canvas = document.getElementById("canvas"); //canvas var context = canvas.getContext('2d'); //canvas2d var flag = 0; //жδ var penwidth=20; // context.fillStyle="#faa"; // context.fillRect(0,0,200,80); // x y canvas.addEventListener('mousemove', onMouseMove, false); // canvas.addEventListener('mousedown', onMouseDown, false); // canvas.addEventListener('mouseup', onMouseUp, false); // var movex=-1; var movey=-1; var imgData;//imagedada var rgbabox=[];//rgba function onMouseMove(evt) { if (flag == 1) { movex=evt.layerX; movey=evt.layerY; context.fillStyle="#FF0000"; context.beginPath(); context.globalCompositeOperation="destination-out"; context.arc(movex,movey,penwidth,0,Math.PI*2,true); //Math.PI*2JS context.closePath(); context.fill(); } } function onMouseDown(evt) { flag = 1; // } function onMouseUp(evt) { flag = 0; // imgData=context.getImageData(0,0,200,80);// //imgData.data.length 4rgba for(var i=0; i<imgData.data.length;i+=4){ var rval=imgData.data[i]; var gval=imgData.data[i+1]; var bval=imgData.data[i+2]; var aval=imgData.data[i+3]; var rgbaval=rval+"-"+gval+"-"+bval+"-"+aval; rgbabox.push(rgbaval); } //end for(var j=0;j<rgbabox.length;j++){ //alert(rgbabox[j].split("-")[0]) rgbabox[j]='#'+rgbToHex(rgbabox[j].split("-")[0],rgbabox[j].split("-")[1],rgbabox[j].split("-")[2]); } nump=countSubstr(rgbabox.join(","),backcolorb,true); opacitya=(numl-nump)/numl; if(opacitya>opacityb){ alert(""+percjcon[numrandom]) }else{} } function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }//rgb16 #xxx function countSubstr(str,substr,isIgnore){// var count; var reg=""; if(isIgnore==true){ reg="http://m.jb51.net/"+substr+"/gi"; }else{ reg="http://m.jb51.net/"+substr+"/g"; } reg=eval(reg); if(str.match(reg)==null){ count=0; }else{ count=str.match(reg).length; } return count; } //end </script> </html>