<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body margin = "0px">
<!--<h2>在Javascript中创建json对象。</h2>-->
<!--<p>first name:<span id = "fname"></span></p>-->
<!--<p>-->
<!--Name:<span id = "jname"></span><br>-->
<!--Address:<span id = "jaddre"></span><br>-->
<!--Age:<span id = "jage"></span><br>-->
<!--Phone:<span id = "jphone"></span><br>-->
<!--</p>-->
<!--<p>-->
<!--First Name:<apan id = "frname"></apan><br>-->
<!--Last Name:<span id = "lname"></span><br>-->
//制作画板
<div align="center">
<!--创建画布-->
<canvas id=" mycanvas" width="800px" height="800px" style="border: 2px solid salmon"></canvas>
<div class= "control-ops">
<button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画布</button>
line width:<select id="selWidth">
<option value="1">1</option>
<option value="3">2</option>
<option value="5">3</option>
<option value="7">4</option>
<option value="9">9</option>
<option value="11" selected = "selected">11</option>
</select>
color:<select id = "selColor">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="pink">pink</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
</div>
</div>
</p>
<script type="text/javascript">
var mousePressed = false;
var lastX,lastY;
var ctx;
function InitThis(){
ctx.document.getElementById("mycanvas").getContext("2d");
}
$(‘#mycanvas‘).mousedown(function(e){
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top,false);
});
$(‘#mycanvas‘).mousemove(function(e){
if(mousePressed){
Draw(e.pageX - $(this).offset.left, e.pageY - $(this).offset().top,true);
}
});
$(‘#mycanvas‘).mouseup(function(e){}
mousePressed = false;
}
);
$(‘#mycanvas‘).mouseleave(function(e)
mousePressed = false;
);
function (x,y,isDown){
if(isDown){
ctx.beginPath();
ctx.strokeStyle = $(‘#selColor‘).val();
ctx.lineWidth = $(‘selWidth‘).val();
ctx.linejoin = "round";
ctx.moveTo(lastX,lastY);
ctx.lineTo(x,y);
ctx.closePath();
ctx.stroke();
}
lastX = x,lastY = y;
}
function clearArea(){
// Use the identity matrix while clearing the canvas
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
// var JSONobject = {
// "name":"Bill Gates",
// "address":"Fifth Avenue New Yourk 666",
// "age":21,
// "phone":"18408234562";
// }
// document.getElementById("jname").innerHTML = JSONobject.name;
// document.getElementById("jaddre").innerHTML = JSONobject.address;
// document.getElementById("age").innerHTML = JSONobject.age;
// document.getElementById("jphone").innerHTML = JSONobject.phone;
// var employees = [
// {"firstName":"Bill","lastName":"Gates"},
// {"firstName":"first","lastName":"Snoopy"},
// {"firstName":"Micheal","lastName":"Kates"}
// ];
// employees[1].firstName = "jobs";
// document.getElementById("fname").innerHTML = employees[1].firstName;
// var txt = ‘{ "employees" + [‘ +
// ‘{"firstName":"Bill","lastName":"Gates"}‘+
// ‘{"firstName":"ILOVE","lastName":"Snoopy"}‘+
// ‘{"firstName":"Tome","lastName":"mike"}‘
// ‘]
// }‘;
// var obj = eval("(" + txt + ")");
// document.getElementById("fname").innerHTML = obj.employees[1].firstName;
// document.getElementById("lname").innerHTML = obj.employees[2].lastName;
</script>
</body>
</html>