<!DOCTYPE html>
<html>
<script type="text/javascript">
var p = [
{
location:[
{x:0,y:0},
{x:400,y:400},
{x:0,y:800}],
color:"Brown"
},
{
location:[
{x:0,y:0},
{x:400,y:400},
{x:800,y:0}],
color:"Chartreuse "
},
{
location:[
{x:800,y:0},
{x:600,y:200},
{x:800,y:400}],
color:"red"
},
{
location:[
{x:600,y:200},
{x:400,y:400},
{x:600,y:600},
{x:800,y:400}],
color:"blue"
},
{
location:[
{x:400,y:400},
{x:200,y:600},
{x:600,y:600}],
color:"green"
},
{
location:[
{x:200,y:600},
{x:600,y:600},
{x:400,y:800},
{x:0,y:800}],
color:"yellow"
},
{
location:[
{x:800,y:400},
{x:400,y:800},
{x:800,y:800}],
color:"Cyan "
}
]
function draw(context){
var length = p.length;
for (var i = 0; i < length; i++) {
context.beginPath();
context.fillStyle =p[i].color;
var innerLength = p[i].location.length;
context.moveTo(p[i].location[0].x,p[i].location[0].y);
for (var j = 1; j < innerLength; j++) {
console.log(p[i].location[j]);
context.lineTo(p[i].location[j].x,p[i].location[j].y);
}
context.fill();
context.closePath();
}
}
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
if(context){
draw(context);
}else{
alert('当前浏览器不支持Canvas，请更换浏览器后再试');
}
}
</script>
<body>
<canvas id="canvas" width="800" height="800" style="border:1px solid #aaa;display:block;margin:0 auto;">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
</body>
</html>
跌落尘层的王者
2014-10-19
举报
0/150
提交
取消
