fungsi
cnvs_getCoordinates(e){ -
x=e.clientX;
y=e.klienY;
document.getElementById(
"xyordinate"-
).innerHTML="Koordinat: (" x
","- y
")"-
; }
-
fungsi cnvs_clearCoordinates(){
document.getElementById("xyordinate").innerHTML="";}
-
Kod XML/HTML-
Salin kandungan ke papan keratan
- <div id="coordiv" gaya="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout=="cnvs_clearCoordinates()">div>
-
<div id="xyordinate" >div>
-
Laksanakan seperti berikut:
3 Lukis garisan dan grafik
1) Lukis segi empat sama seperti berikut:
Kod JavaScriptSalin kandungan ke papan keratan
-
"myCanvas" lebar="200" tinggi="100" gaya="sempadan:1px pepejal #c3c3c3;">
-
Penyemak imbas anda tidak menyokong teg kanvas
-
-
- "teks/javascript">
-
- var c=document.getElementById("myCanvas");
var
- cct=c.getContext("2d");
cxt.moveTo(10,10); //x,y titik permulaan
-
cxt.lineTo(10,50); //x,y
-
cxt.lineTo(50,50); //x,y
-
cxt.lineTo(50,10); //x,y
-
cxt.lineTo(10,10); //x,y
-
cxt.stroke();
-
-
Laksanakan seperti berikut
-
2) Lukis bulatan seperti berikut:
Kod JavaScript
Salin kandungan ke papan keratan
-
-
Pelayar anda tidak menyokong kanvas
-
-
"teks/javascript">
var-
c=document.getElementById("myCanvas");
var
cct=c.getContext(-
"2d");
cxt.fillStyle="#ccc";
cxt.beginPath(); -
cxt.arc(20,20,10,0,Math.PI*2,benar
);
-
cxt.closePath();
-
cxt.fill();
-
-
Laksanakan seperti berikut:
-
- 4. Lukis kecerunan
Kod JavaScript
Salin kandungan ke papan keratan