canvas设置的颜色与显示的颜色不一致

Question

这篇问题已被关闭，原因：与技术无关、讨论类、对他人无用

canvas设置的颜色与显示的颜色不一致

发布于
2016-09-26

更新于
2016-09-26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字像素化</title>
    <style>
        
        canvas{
            background-color: #fff;
            margin: 0 auto;
            display: block;
        }
        body{
            background-color: #ccc;
        }
        input{
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    
    <canvas id="can" height="500" width="500"></canvas>
    <input type="button" value="文"><input type="button" value="字">
    <script>

        
        var canvas = document.getElementById('can');
        var ctx = canvas.getContext('2d');
        var aInput = document.getElementsByTagName('input');

        for (var i = 0; i < aInput.length; i++) {
            aInput[i].onclick = function () {
                //获取文字
                var str = this.value;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                //设置样式
                var h = 200;
                ctx.font = h + 'px impact';
                ctx.fillStyle = 'green';
                ctx.textBaseline = 'top';
                var w = ctx.measureText(str).width;
                ctx.fillText(str,(canvas.width - w)/2,(canvas.height - h)/2);
                //获取图像数据
                var img = ctx.getImageData((canvas.width - w)/2,(canvas.height - h)/2,w,h);
                //清空画布
                ctx.clearRect(0,0,canvas.width,canvas.height);
                var newImg = ctx.createImageData(w,h);
                var ranArr = randomArr(w*h,w*h/10);
                //设置新像素点数据
                for (var i = 0; i < ranArr.length; i++) {
                    newImg.data[ranArr[i]*4] = img.data[ranArr[i]*4];
                    newImg.data[ranArr[i]*4+1] = img.data[ranArr[i]*4+1];
                    newImg.data[ranArr[i]*4+2] = img.data[ranArr[i]*4+2];
                    newImg.data[ranArr[i]*4+3] = img.data[ranArr[i]*4+3];
                }
                //设置新图像数据
                ctx.putImageData(newImg,(canvas.width - w)/2,(canvas.height - h)/2);
            }
        }


        //从一组数据中随机抽取一组数
        function randomArr(all,part) {
            var arr = [];
            var result = [];

            for (var i = 0; i < all; i++) {
                arr.push(i);
            }
            for (var i = 0; i < part; i++) {
                result.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
            }
            return result;
        }
    </script>
</body>
</html>

可以看到，颜色设置为green
图片描述
然而，在chrome 以及在firefox中显示为蓝色