如何调整画布大小

用户名

我有一个默认大小为100x100的画布。我有s来决定画布应该多大,然后应通过单击简单的按钮进行设置。

但是,它始终会重新调整为默认大小。

<!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> 
埃尔兹

当您单击按钮时,表单正在提交-这是默认的表单行为。您可以防止这种情况。改变:

$('#ok').on('click',function (){
    // ...
});

对此:

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

    // ...
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整图像大小以适合画布-Gimp

来自分类Dev

如何在画布上重新绘制以调整大小而不会模糊?

来自分类Dev

调整画布大小而不裁剪

来自分类Dev

调整画布项目的大小

来自分类Dev

Raphaeljs调整画布大小以适合内容

来自分类Dev

如何调整大小然后使用画布裁剪图像

来自分类Dev

为什么不调整画布大小?

来自分类Dev

在画布中绘制时如何调整位图的大小?

来自分类Dev

调整画布图像的大小

来自分类Dev

jQuery,调整画布大小而不缩放

来自分类Dev

调整画布元素/形状的大小

来自分类Dev

使用.scale()调整HTML画布的大小

来自分类Dev

如何在flex容器中调整固定大小(画布)的元素的大小?

来自分类Dev

画布粒子-在“窗口调整大小”上更新画布大小

来自分类Dev

调整画布大小时图像消失

来自分类Dev

上传前使用画布调整图像大小

来自分类Dev

使用Flexbox和Enyo调整画布大小

来自分类Dev

无法调整画布大小

来自分类Dev

角度画布在调整大小时不刷新

来自分类Dev

如何在画布上移动/调整大小/旋转ContentControl?

来自分类Dev

在窗口调整大小上动态调整画布大小

来自分类Dev

调整画布图像的大小

来自分类Dev

调整画布元素的大小

来自分类Dev

HTML:如何将画布标签的大小调整为窗口的大小

来自分类Dev

如何在窗口调整大小时重绘画布

来自分类Dev

在画布中调整图像大小

来自分类Dev

使用 getImageData 调整画布大小

来自分类Dev

在 HTML 中调整 SVG 大小而不调整画布大小

来自分类Dev

画布调整大小 photoshop 脚本

Related 相关文章

热门标签

归档