<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
//初始时画小人
window.οnlοad=function() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//画左边头
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.arc(105,75,35,Math.PI/2,Math.PI*1.5,false);
ctx.fill();
//画右边头
ctx.beginPath();
ctx.arc(110,75,35,Math.PI*1.5,Math.PI/2,false);
ctx.fill();
//画躯干
ctx.beginPath();
ctx.rect(80,120,55,100);
ctx.fill();
//画左臂
ctx.beginPath();
ctx.rect(25,140,50,20);
ctx.fill();
//画右臂
ctx.beginPath();
ctx.rect(140,140,50,20);
ctx.fill();
//画左腿
ctx.beginPath();
ctx.rect(80,225,20,80);
ctx.fill();
//画右腿
ctx.beginPath();
ctx.rect(115,225,20,80);
ctx.fill();
//添加事件响应
canvas.addEventListener('click', function(e){
p = getEventPosition(e);
reDraw(p,ctx);
}, false);
}
}
//得到点击的坐标
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
//重绘
function reDraw(p,ctx){
arr = [
{x:105, y:75, width:Math.PI/2, height:Math.PI*1.5},
{x:110, y:75, width:Math.PI*1.5, height:Math.PI/2},
{x:80, y:120, width:55, height:100},
{x:25, y:140, width:50, height:20},
{x:140, y:140, width:50, height:20},
{x:80, y:225, width:20, height:80},
{x:115, y:225, width:20, height:80}
]
//保存序号的数组,这样,即使一次点多个,也能保存——本例中只能每次点一个
var whichObject = [];
for(var i=0; i < arr.length; i++){
//用圆画头
if(i<2){
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);
ctx.fill();
if(p && ctx.isPointInPath(p.x, p.y)){
whichObject.push(i);
//修改点中区域的颜色
ctx.fillStyle='#F39814';
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);
ctx.fill();
}
//用矩形画躯干
}else{
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
ctx.fill();
if(p && ctx.isPointInPath(p.x, p.y)){
whichObject.push(i);
ctx.fillStyle='#F39814';
ctx.beginPath();
ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
ctx.fill();
}
}
}
//显示点击了哪个部分
//alert("click:" + whichObject[0]);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvas" width="600" height="500" style="border: 5px blue solid"></canvas>
<br /><br />
</div>
</body>
</html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
//初始时画小人
window.οnlοad=function() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//画左边头
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.arc(105,75,35,Math.PI/2,Math.PI*1.5,false);
ctx.fill();
//画右边头
ctx.beginPath();
ctx.arc(110,75,35,Math.PI*1.5,Math.PI/2,false);
ctx.fill();
//画躯干
ctx.beginPath();
ctx.rect(80,120,55,100);
ctx.fill();
//画左臂
ctx.beginPath();
ctx.rect(25,140,50,20);
ctx.fill();
//画右臂
ctx.beginPath();
ctx.rect(140,140,50,20);
ctx.fill();
//画左腿
ctx.beginPath();
ctx.rect(80,225,20,80);
ctx.fill();
//画右腿
ctx.beginPath();
ctx.rect(115,225,20,80);
ctx.fill();
//添加事件响应
canvas.addEventListener('click', function(e){
p = getEventPosition(e);
reDraw(p,ctx);
}, false);
}
}
//得到点击的坐标
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
//重绘
function reDraw(p,ctx){
arr = [
{x:105, y:75, width:Math.PI/2, height:Math.PI*1.5},
{x:110, y:75, width:Math.PI*1.5, height:Math.PI/2},
{x:80, y:120, width:55, height:100},
{x:25, y:140, width:50, height:20},
{x:140, y:140, width:50, height:20},
{x:80, y:225, width:20, height:80},
{x:115, y:225, width:20, height:80}
]
//保存序号的数组,这样,即使一次点多个,也能保存——本例中只能每次点一个
var whichObject = [];
for(var i=0; i < arr.length; i++){
//用圆画头
if(i<2){
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);
ctx.fill();
if(p && ctx.isPointInPath(p.x, p.y)){
whichObject.push(i);
//修改点中区域的颜色
ctx.fillStyle='#F39814';
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);
ctx.fill();
}
//用矩形画躯干
}else{
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
ctx.fill();
if(p && ctx.isPointInPath(p.x, p.y)){
whichObject.push(i);
ctx.fillStyle='#F39814';
ctx.beginPath();
ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
ctx.fill();
}
}
}
//显示点击了哪个部分
//alert("click:" + whichObject[0]);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvas" width="600" height="500" style="border: 5px blue solid"></canvas>
<br /><br />
</div>
</body>
</html>