【canvas】为什么fox和chrome显示效果有差别，有什么办法兼容

chrome主要体现不能居中了，然后会导致出来一截未覆盖，
<!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>
幕布斯2315112
浏览 1416回答 0
0回答

随时随地看视频慕课网APP