chrome主要體現(xiàn)不能居中了，然后會導(dǎo)致出來一截未覆蓋，
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style>
body{background:?black}
#canvas{background:?white;}
ul{float:?left;font-size:?60px;color:?white}
</style>
<script>
window.onload=function?()?{
var?oC=document.getElementById('canvas');
var?oGC=oC.getContext('2d');
var?aLi=document.getElementsByTagName('li');
for?(var?i?=?0;?i?<?aLi.length;?i++)?{
aLi[i].onclick=function?()?{
var?str=this.innerHTML;
var?h=180;
oGC.clearRect(0,0,oC.width,oC.height?);
oGC.font=h+'px?impact';
oGC.textBaseline='top';
oGC.fillStyle='red';
var?w=oGC.measureText(str).width;
oGC.fillText(str,(oC.width-w)/2,(oC.height-h)/2);
var?oImg=oGC.getImageData((oC.width-w)/2,(oC.height-h)/2,w,h);
var?arr=randomArr(w*h,w*h/10);
var?newImg=oGC.createImageData(w,h);
for?(var?i?=?0;?i?<?arr.length;?i++)?{
newImg.data[4*arr[i]]=oImg.data[4*arr[i]];
newImg.data[4*arr[i]+1]=oImg.data[4*arr[i]+1];
newImg.data[4*arr[i]+2]=oImg.data[4*arr[i]+2];
newImg.data[4*arr[i]+3]=oImg.data[4*arr[i]+3];
}
oGC.putImageData(newImg,(oC.width-w)/2,(oC.height-h)/2);
}
}
function?randomArr(iAll,iNow)?{
var?arr=[];
var?newArr=[];
for?(var?i?=?0;?i?<?iAll;?i++)?{
arr.push(i);
}
for?(var?i?=?0;?i?<?iNow;?i++)?{
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return?newArr;
}
}
</script>
</head>
<body>
<canvas?id="canvas"?width=400px?height=400px></canvas>
<ul>
<li>文</li>
<li>字</li>
<li>漸</li>
<li>顯</li>
</ul>
</body>
</html>
【canvas】為什么fox和chrome顯示效果有差別，有什么辦法兼容
幕布斯2315112
2016-05-03 12:32:57