像素高4行

Question

使用错误的颜色和4行高的像素绘制像素。

like this

var cnv = document.getElementById("john");
var ctx = cnv.getContext("2d");
var width = cnv.width;
var height = cnv.height;

//ctx.imageSmoothingEnabled = false;
var imd = ctx.createImageData(width,height);

i = 0;

imd.data[i] = 255;
imd.data[i+1] = 0;
imd.data[i+2] = 0;
imd.data[i+3] = 255;

ctx.putImageData(imd,1,1);

https://jsfiddle.net/zzxsvsxy/2/

Answer 1

问题是由使用CSS设置画布的高度引起的：

canvas { width: 300px; height: 300px; }

仅使用内联规则设置画布大小：

<canvas width="300" height="300"></canvas>