-
Notifications
You must be signed in to change notification settings - Fork 0
/
CANVASTEST.HTML
36 lines (35 loc) · 1.09 KB
/
CANVASTEST.HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<canvas id='canvas' width='1024' height='768' style='border:1px solid red' ></canvas>
<script type='text/javascript'>
var okcan=document.getElementById('canvas');
var context=okcan.getContext('2d');
var data=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
];
function ok(ctxdata,context){
for(i=0;i<ctxdata.length;i++){
context.beginPath();
context.moveTo(ctxdata[i].p[0].x,ctxdata[i].p[0].y);
for(j=1;j<ctxdata[i].p.length;j++){
context.lineTo(ctxdata[i].p[j].x,ctxdata[i].p[j].y);
}
context.closePath();
context.fillStyle=ctxdata[i].color;
context.fill();
}
}
ok(data,context);
</script>
</body>
</html>