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

Question

我将脚本限制在 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>

Answer 1

可调整大小或在 css 中设置大小的问题是 Canvas 将表现得好像它是原始/默认大小 (100x100) 并缩放内容。如果您使用的是图像编辑器，这就像更改图像大小，而您正在尝试更改 Canvas 大小。

您需要更改 Canvas 的 width 和 height 属性，而不是 css 宽度和高度属性。