画布未更新答案

【问题标题】：Canvas is not updating画布未更新
【发布时间】：2018-01-08 19:26:06
【问题描述】：

出于学习目的，我正在尝试复制此example。一切似乎都很好，但由于某些原因，画布没有更新。每当代码执行、终止或完成时，画布始终是 0px 宽 0px 高。也许我犯了一些错误（当然我应该说），但我不知道什么是错的。

// create the network
const { Layer, Network } = window.synaptic;

var inputLayer = new Layer(2);
var hiddenLayer = new Layer(15);
var outputLayer = new Layer(3);

inputLayer.project(hiddenLayer);
hiddenLayer.project(outputLayer);

var myNetwork = new Network({
    input: inputLayer,
    hidden: [hiddenLayer],
    output: outputLayer
});

var imgRef = new Image();
imgRef.src = './reference.png';
var width = imgRef.width;
var height = imgRef.height;
imgRef.setAttribute('crossOrigin', '');

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasd = ctx.getImageData(0 , 0, width, height)

var refCanvas = document.getElementById('canvas1');
var rctx = canvas.getContext('2d');

var refHTML = document.getElementById('reference');

rctx.drawImage(refHTML, 0, 0);

var ref = rctx.getImageData(0, 0, width, height);
imageData = ctx.getImageData(0,0,width,height);

// train the network - learn XOR
var learningRate = .1;

for (var i = 0; i < 20000; i++)
    {

        for (var x=0;x<width;x++){
            for(var y=0;y<height;y++){

                myNetwork.activate([x/width, y/height]);
                myNetwork.propagate(learningRate, pixel(ref.data, x,y));




                var rgb = myNetwork.activate([x/width,y/height]);

                imageData.data[((height * y) + x) * 4] = (rgb[0] )* 255;
            imageData.data[((height * y) + x) * 4 + 1] = (rgb[1] ) * 255;
            imageData.data[((height * y) + x) * 4 + 2] = (rgb[2] ) * 255;
            imageData.data[((height * y) + x) * 4 + 3] = 1;
            }
        }

        ctx.putImageData(imageData,0,0);


    }


function pixel(data,a,b){

    var red = data[((height*b)+a)*4];
    var green = data[((height*b)+a)*4 + 1];
    var blue = data[((height*b)+a)*4 + 2]

    return [red/225, green/225, blue/225]
}

代码在 Firefox 上测试。

【问题讨论】：

标签： javascript canvas synaptic.js

【解决方案1】：

在线var canvas = document.getElementById('canvas'); 您正在从页面中选择一个画布元素。这有时会在 JS 定义的 Width/Height 和 CSS 定义的 Width/Height 之间产生冲突。

试试吧：

var canvas = document.createElement('canvas');
canvas.height = y;
canvas.width = x;

【讨论】：