如何调整画布的大小
如何调整画布的大小
提问于 2014-11-14 20:27:04
我有一个默认尺寸为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> 回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-14 20:35:57
单击该按钮时，表单将提交--这是默认的表单行为。你可以阻止这一切。更改：
$('#ok').on('click',function (){
// ...
});对此：
$('#ok').on('click',function (event){
event.preventDefault();
// ...
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26938282
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号