canvas.html
Pentru a rula acest script aveti nevoie de:
Resurse:
Canvas tutorial
- editor de text;
- browser.
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function onclick() {
var button = document.getElementById('button1a');
button.onclick = draw();
}
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 100);
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="tutorial" width="150" height="150"></canvas>
<p>
<input id="button1a" type="button" value="button">
</p>
</body>
</html>
Acest cod afiseaza imaginea de mai jos, iar la apasarea butonului umple spatiul cu un patrat de culoare neagra.<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function onclick() {
var button = document.getElementById('button1a');
button.onclick = draw();
}
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 100);
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="tutorial" width="150" height="150"></canvas>
<p>
<input id="button1a" type="button" value="button">
</p>
</body>
</html>
Resurse:
- http://www.marplo.net/javascript/functii1.html
- http://www.w3schools.com/js/default.asp
- http://www.scribd.com/doc/33522161/javascript
Comentarii
Trimiteți un comentariu