html5 canvas修改颜色,javascript,html5_canvas设置的颜色与显示的颜色不一致，javascript,html5,html - phpStudy...

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

文字像素化

canvas{

background-color: #fff;

margin: 0 auto;

display: block;

}

body{

background-color: #ccc;

}

input{

margin: 0 auto;

display: block;

}

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;

}

可以看到，颜色设置为green

然而，在chrome 以及在firefox中显示为蓝色

这是出现了什么问题？怎么解决呢？有大神可以告诉我一下吗，谢谢

相关阅读:

如何在webpack构建完成后执行我的一些nodejs代码

php 修改图片exif 信息

TypeScript怎么获取input的值？

Class内this的指向问题

quartz的cron表达式的问题

JavaScript 闭包中状态存储问题？

包裹Span的DIV 设置span字体时候显示不是左上角

IE图片不显示

three.js使用threeBSP出现一点小错误，不知道什么原因

安卓app欢迎界面实时更新

ES6语法问题

自己使用yoman下的react-webpack构建的项目，运行npm start报错,怎么解决？

VS Code 安装官方的C/Cpp插件，但是code format不起作用

微信图片无法使用

loading加載完成後消失

ubuntu16.04删除rc0.d中的K09halt文件后，键盘无法输入

mysql语句问题

将一个数随机分为 n 份，如何实现？

sql创建表，其中salary字段要求浮点型，默认值为0，取值0-99999

django 一个app做两个网站