`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas example 2</title>
<style>
body { background-color:#eeeeee; }
#outer {margin-left:40px;
margin-top:40px;}
</style>
</head>
<body>
<div id="outer">
<canvas id="canvas1" width="300" height="300"
style="border: 6px green solid">
Your Browser doesn't support the canvas! Try another browser.
</canvas>
</div>
<script>
var mycanvas=document.getElementById("canvas1");
var cntx=mycanvas.getContext('2d');
//draw solid rectangle
cntx.fillStyle='rgb(233,60,233)';
cntx.fillRect(30,30,400,400);
//draw rectangle with 50% transparency
cntx.fillStyle='rgba(30,255,255,0.5)';
cntx.fillRect=(60,60,200,200);
//draw rectangle with 75% transparency
cntx.fillStyle='rgba(0,0,0,0.25)';
cntx.fillRect(90,90,400,400);
</script>
</body>
</html>
`
I am trying to create more squares on the other side of the browser window but do not know how to do it? I have it where I need it on the left side and I was trying to duplicate it on the right side of the open browser.
Aucun commentaire:
Enregistrer un commentaire