기본 크기가 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] 삭제
몇 마디 만하겠습니다