1

我开始玩 html5 画布。我将逐个像素地绘制图。首先，我想逐个像素地制作两个矩形。以下代码有效：

<html>
<head>

<%= javascript_include_tag "jquery-1.9.1" %>

<script type="text/javascript" src=""></script>

<script type="text/javaScript">

function plotCanvas2d(mean,nx,nz,canvas)
{

var context = canvas.getContext('2d');

var imageData = context.createImageData(nx,nz);

var kk=0;
var blue;

for (var jj=0; jj<nz; ++jj) {
    for (var ii=0; ii<nx; ++ii) {

        blue = mean[ii][jj]*255;

        imageData.data[kk] = 0;
        imageData.data[kk+1] = 0;
        imageData.data[kk+2] = blue;
        imageData.data[kk+3] = 255;
        kk += 4;
    }
}

context.putImageData(imageData, 0, 0);
}

$(document).ready( function plotFull()
{

var nx = 600;
var nz = 300;

var mean = new Array(nx);

for (var ii=0; ii<nx; ii++)
{
    mean[ii] = new Array(nz);
}

for (var ii=0; ii<nx; ii++) {
    for (var jj=0; jj<nz; jj++)
    {
        mean[ii][jj] = 0.0;
    }
}


// $('#canvas').height(nz);
// $('#canvas').width(nx);
var canvas = document.getElementById('canvas');

for (var jj=0; jj<nz/2; ++jj) {
    for (var ii=0; ii<nx; ++ii) { 
        mean[ii][jj] = 0; }}

for (var jj=nz/2; jj<nz; ++jj) {
    for (var ii=0; ii<nx; ++ii) {
        mean[ii][jj] = 1; }}

plotCanvas2d(mean,nx,nz,canvas)

});      

</script>

</head> 
<body>
<!-- <canvas id="canvas" width="600" height="300"></canvas> -->
<canvas id="canvas" ></canvas>
</body>
</html>

但是如果我取消注释三个注释行，并在 html 正文上注释画布定义，它不会。我正在做一些更复杂的事情，并且能够解决这个问题。如果我在其定义中设置画布的大小，则代码有效。如果我使用 jquery 设置大小，则不会。在第一种情况下，图像是一个蓝色和黑色的矩形，在第二种情况下只有黑色。在更大的代码段中，第二种情况下的行为几乎是不可预测的。我错过了什么？它必须是一些愚蠢的东西，但我就是看不到它......

4

1 回答 1

0

如果我理解正确，请尝试使用

 $('#canvas').attr('width',600);
 $('#canvas').attr('height',300);

我认为您需要设置宽度和高度属性，因此需要设置 .attr()。

另外，如果使用 jquery，我认为您需要使用：

var canvas = $('#canvas')[0];

将画布传递给您的方法而不是 jquery 对象。

于 2013-02-27T16:17:47.867 回答