Javascript 如何调整画布的大小_Javascript_Jquery_Html_Jquery Ui_Canvas

Javascript 如何调整画布的大小

javascript jquery html jquery-ui canvas

Javascript 如何调整画布的大小,javascript,jquery,html,jquery-ui,canvas,Javascript,Jquery,Html,Jquery Ui,Canvas,我有一个默认大小为100x100的画布。我有一个决定画布大小的按钮，然后通过简单的按钮点击来设置但它总是调整回默认大小 <!DOCTYPE html> <html> <head lang="en"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jqu

我有一个默认大小为100x100的画布。我有一个决定画布大小的按钮，然后通过简单的按钮点击来设置

但它总是调整回默认大小

<!DOCTYPE html>
<html>
<head lang="en">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="startForm">
    <label>Höhe:</label>
    <input value="500" size="4" id="height">
    <label>Breite:</label>
    <input value="500" size="4" id="width">
    <label>Seitenlänge:</label>
    <input value="50" size="4" id="length">
    <button id="ok">Start</button>
    <p/>
</form>
<canvas id="myCanvas" width="100" height="100"
    style="border:1px solid #000000;">
</canvas>
<script>
$("button").button();
$('#ok').on('click',function(){
    var w = $('#width').val();
    var h = $('#height').val();
    var l = $('#length').val();
    init(w,h,l);
});
var length;
var x,y;
function init(w,h,l){
    length = l;
    var c = document.getElementById("myCanvas");
    c.height=h;
    c.width=w;
    drawCircle();
    $('#myCanvas').on('click', function(e){
        var clickX = e.clientX;
        var clickY = e.clientY;

        if(clickX>=x && clickY>=y && clickX<=x+length && clickY<=y+length){
            drawCircle();
        }

    });
}
function drawCircle(){

    var c = document.getElementById("myCanvas");

    x = Math.round((Math.random() * (c.width-length)));
    y = Math.round((Math.random() * (c.height-length)));
    var ctx = c.getContext("2d");
    ctx.clearRect(0,0, c.width, c.height);
    ctx.beginPath();
    ctx.rect(x,y,length,length);

    var col = Math.random()*6;
    if(col<=1) {
        ctx.fillStyle = 'red';
    }else if(col<=2){
        ctx.fillStyle = 'green';
    }else if(col <=3){
        ctx.fillStyle = 'blue';
    }else if(col <=4){
        ctx.fillStyle = 'yellow';
    }else if(col <=5){
        ctx.fillStyle = 'orange';
    }else if(col <=6){
        ctx.fillStyle = 'black';
    }

    ctx.fill();
    ctx.stroke();
}
</script>   
</body>
</html>


霍赫：
布雷特：
Seitenlänge：
开始

$（“按钮”）.button（）；
$（'#ok'）。在（'单击'，函数（）上）{
var w=$（'#width'）.val（）；
var h=$（'#height'）.val（）；
var l=$（'#length'）.val（）；
初始值（w，h，l）；
});
变异长度；
变量x，y；
函数init（w，h，l）{
长度=l；
var c=document.getElementById（“myCanvas”）；
c、 高度=h；
c、 宽度=w；
画圈（）；
$（'#myCanvas'）。在（'click'，函数（e）上{
var clickX=e.clientX；
var clickY=e.clientY；
如果单击按钮时（clickX>=x&&clickY>=y&&clickX），则表单正在提交-这是默认表单行为。您可以防止此情况。更改：
$('#ok').on('click',function (){
    // ...
});

为此：
$('#ok').on('click',function (event){
    event.preventDefault();

    // ...
});

这对我来说很好。你能更详细地解释你的问题吗？当我单击“开始”时，我可以看到画布已调整大小，并显示一个彩色矩形。但半秒钟后，页面似乎被重新加载，画布再次为100x100，没有矩形initAh，明白了。请参阅我的答案