html5画布和jquery的怪异行为
我开始玩html5画布。我将逐像素绘制图形。首先,我想逐像素制作两个矩形。以下代码起作用:html5画布和jquery的怪异行为,jquery,html5-canvas,Jquery,Html5 Canvas,我开始玩html5画布。我将逐像素绘制图形。首先,我想逐像素制作两个矩形。以下代码起作用: <html> <head> <%= javascript_include_tag "jquery-1.9.1" %> <script type="text/javascript" src=""></script> <script type="text/javaScript"> function plotCanvas2d(mea
<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>
函数图Canvas2D(平均值、nx、nz、画布)
{
var context=canvas.getContext('2d');
var imageData=context.createImageData(nx,nz);
var-kk=0;
蓝变种;
对于(var jj=0;jj如果我理解正确,请尝试使用
$('#canvas').attr('width',600);
$('#canvas').attr('height',300);
您需要设置width和height属性,我认为这就是.attr()
另外,如果使用jquery,我认为您需要使用:
var canvas = $('#canvas')[0];
将画布而不是jquery对象传递到方法中。您正在混合nz和nx以及迭代变量。