您的位置：首页 > Web前端 > HTML5

canvas 记录绘画对象实现交互能力 简单碰撞检测

2014-12-24 17:52 507 查看 
<!DOCTYPE HTML>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<title>Interactive Canvas demo</title>
<style type="text/css">
#myCanvas{border: 1px solid;}
</style>

</head>

<body>
<div class="container">
<p>Interactive Canvas demo from "The missing manual HTML5" --Matthew MacDonald</p>
<canvas id="myCanvas" width="600" height="400"></canvas><br>
<button onclick="addRadomCircle()">add circle</button>
<div>
<ul>
<li>draw circles randomly in canvas</li>
<li>able to select drawn circle</li>
<li>recreate the whole canvas once new circle added or circle selected</li>
<li>implement simple collision detection</li>
<li>random integer function</li>
<li>class and object</li>
<li>manuplate array</li>
</ul>
</div>
</div>

<script type="text/javascript">

//create global variables
var canvas;
var context;
var previousSelectedCircle;

//window.onload: wait until all elements loaded including imgs
//jquery  $(document).ready(function(){}): wait until all dom structure loaded
window.onload = function(){
canvas=document.getElementById("myCanvas");
context=canvas.getContext("2d");
context.strokeStyle = "black";
canvas.onmousedown = canvasClick;   //bind event to element
}

// create a class
function Circle(x,y,radius,color){
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.isSelected = false;
}

// create an array to store all circles drawn
var circles = [];

// add a circle using random parameters
function addRadomCircle(){
var radius = randomFromTo(10,80);
var x = randomFromTo(0,canvas.width);
var y = randomFromTo(0,canvas.height);
var colors = ["green", "blue","red", "yellow", "magenta", "orange", "brown", "purple", "pink"];
var color = colors[randomFromTo(0,8)];

var circle = new  Circle(x,y,radius,color);

circles.push(circle);

drawCircles(); // draw all circles in circles array
}

// refresh the whole canvs and draw all circles
function drawCircles(){
// clear the canvas
context.clearRect(0,0,canvas.width,canvas.height);
// set transparency
context.globalAlpha = 0.85;
// iterate circles array
for(var i=0; i<circles.length; i++){
var circle = circles[i];
context.beginPath();
context.arc(circle.x,circle.y,circle.radius,0,Math.PI*2);
context.fillStyle = circle.color;
// add border if selected
if(circle.isSelected){
context.lineWidth = 5;
context.fill();
context.stroke();
} else {
context.fill();
}
}
}

// check mouse click on any circle or empty area
function canvasClick(e){
var clickX = e.pageX - canvas.offsetLeft; // offsetleft: horizontal offset from first parent element which has a css position
var clickY = e.pageY - canvas.offsetTop;
// iterate circles in a reverse order
for (var i=circles.length-1; i>=0; i--){
var circle = circles[i];
// caculate distance between click point and center of circle using Pythagorean theorem
var distance = Math.sqrt(Math.pow(circle.x-clickX,2)+Math.pow(circle.y-clickY,2));
if (distance <= circle.radius){ // inside circle
// reset isSelected attribute state
if(previousSelectedCircle != null) previousSelectedCircle.isSelected = false;
previousSelectedCircle = circle;
circle.isSelected = true;
// refresh the canvas
drawCircles();
return;// exit iteration
}
}
}

// create a random integer with closed interval ([a,b])
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}

</script>

</body>

</html>

<!--  ref: http://www.prosetech.com/html5/Chapter%2009/InteractiveCircles.html -->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  canvas html5 碰撞检测 画圆 绘画对象
相关文章推荐
新的分享
章节导航