問題があります。チェックボックスがチェックされているかどうかを確認してからrect()関数を呼び出していますが、チェックされていないのにrect()が呼び出されています。助けてください。関数関数 OnChangeCheckbox (checkbox) でチェックボックスのチェック/チェックを外しました
<html lang="en">
<head>
<script>
$(function() {
$( "#check" ).button();
$( "#format" ).buttonset();
});
</script>
<style>
#format { margin-top: 2em; }
</style>
<script>
function OnChangeCheckbox (checkbox) {
if (checkbox.checked == true) {
rect();
}
else if(!checkbox.checked)
{
alert("Uncheck");
}
}
</script>
<script>
function rect() {
var canvas = document.getElementById('canvasSignature'),
ctx = canvas.getContext('2d'),
rect = {},
drag = false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
function mouseUp() {
drag = false;
}
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
//ctx.clearRect(0,0,canvas.width,canvas.height);
draw();
}
}
function draw()
{
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();
}
</script>
</head>
<div id="format">
<input type="checkbox" id="check1" onclick="OnChangeCheckbox(this)" /><label for="check1">Rectangle</label>
</div>
<div id="canvasDiv">
<canvas id="canvasSignature" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"></canvas>
</div>
</html>