javascript - 带有JS和JQuery的HTML集成 Canvas

我将脚本限制在画布部分，解决了所有JS异常，但是当按钮被触发时脚本不响应。为什么不画线？
我知道十六进制代码的随机化还不是最优的，但是为什么除了创建2个按钮之外它什么也不做呢？

提前致谢。

<script type="application/javascript">
function draw() {
var canvas = document.getElementById('resizable');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        } else {
  alert("Your browser does not support <canvas> elements/HTML5")
}


ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();


var i = 0;
var j = 0;


var iData = ctx.createImageData(canvas.width, canvas.height);
for(var i=0; i<iData.data.length; i+=4)
{
    iData.data[i]=Math.floor(Math.random()*255);
    iData.data[i+1]=Math.floor(Math.random()*255);
    iData.data[i+2]=Math.floor(Math.random()*255);
    iData.data[i+3]=255;
    }
ctx.putImageData(iData,0,0);
}

function reset()
{
   ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);
}
    </script>




<canvas id="resizable" width="150" height="150" style="border:1px;"></canvas>

<button onclick="draw()">GO</button>

<button onclick="reset()">Reset</button>

最佳答案

调整大小或在CSS中设置大小的问题在于，画布的行为就像是原始尺寸/默认尺寸（100x100）一样，并缩放内容。如果您使用的是图像编辑器，则就像在尝试更改画布大小时更改图像大小一样。

您需要更改画布的width和height属性，而不是css width和height属性。