13. FLASH Java Silverlight
HTML5 Ajax CSS
JavaScrpt(JQuery,Json・・・)
HTML
HTTP XML
Perl PHP(Cake,Zend) C#(ASP・・)
MySQL SQL Azure Postgre
Linux クラウド(Amazon,Azure・・・・)
27. :
function draw() {
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
c.fillStyle = "#0099ff";
c.fillRect (15, 15, 50, 45);
c.fillStyle = "rgba(0, 0, 200, 0.5)";
c.fillRect (30, 30, 50, 45);
}
:
28. function draw() {
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
c.strokeStyle = "#ff9900";
c.beginPath();
c.arc(70, 70, 60, 0, Math.PI*2, false);
c.stroke();
}
function draw() {
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
c.fillStyle = "#990099";
c.beginPath();
c.arc(70, 70, 60, 0, Math.PI*2, false);
c.fill();
}
29. function draw() {
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
c.fillStyle = "#999999";
c.beginPath();
c.moveTo(10,10);
c.lineTo(200,50);
c.lineTo(100,120);
c.closePath();
c.fill();
}
30. function draw() {
Onloadなので読み込み終
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
了してない
var img = new Image();
img.src = "img/grand001.png";
c.drawImage(img, 0, 0);
}
31. function draw() {
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
var img = new Image();
img.src = "img/grand001.png";
c.drawImage(img, 0, 0, 640, 480);
}
32. function draw() {
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
var img = new Image();
img.src = "img/tree001.png";
c.drawImage(img, 10, 10, 64, 64, 100, 100, 128, 32);
}
33. <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Sample002.html</title>
<script>//<![CDATA[
var timerInterval = 25; //25msec
var timer1;
var c;
function draw() {
}
function init(){
var canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
timer1 = setInterval("draw()", timerInterval);
}
//]]></script>
</head>
<body onload="init()">
<canvas id="canvas1" width=“300" height=“300"></canvas>
</body>
</html>
34. <script>//<![CDATA[
var timerInterval = 25; //25msec イメージの読み
var timer1;
var c; 込み終了を待つ
var img;
function draw() {
}
function init(){
var canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
img = new Image();
img.src = "img/grand001.png";
img.onload = function(){
draw();
timer1 = setInterval("draw()", timerInterval);
}
}
//]]></script>
35. <script>//<![CDATA[
var timerInterval = 25; //25msec
var timer1;
var c;
var img;
var angle = 3;
function draw() {
c.fillStyle = "#c0c0c0";
c.fillRect (0, 0, 300, 300);
c.rotate(angle * Math.PI / 180);
c.drawImage(img, 0, 0);
}
function init(){
var canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
img = new Image();
img.src = "img/grand001.png";
img.onload = function(){
draw();
timer1 = setInterval("draw()", timerInterval);
}
}
//]]></script>
36.
37. <script> function Draw(){
Var draw; draw.clearRect(0, 0, windWidth, windHeight);
Var img;
draw.fillStyle = "#000000";
Var partX;
draw.fillRect(0, 0, windWidth, windHeight);
Var partY;
Var partAX;
Var partAY; draw.globalCompositeOperation = "lighter";
for( var i = 0 ; i < partX.length ; i++ ){
function init() { draw.drawImage(img, partX[i], partY[i]);
var max = 60; //-----------------------------------------
var outputcanvas = document.getElementById("canvas1"); partX[i] += partAX[ i ];
var ang; if( partX[i] < -128 )
partAX[i] = -partAX[i];
per = new Performance(); if( partX[i] > windWidth-128 )
draw = outputcanvas.getContext("2d"); partAX[i] = -partAX[i];
setInterval(“Draw()", 16.7);
partY[i] += partAY[ i ];
windWidth = outputcanvas.width;
windHeight = outputcanvas.height; if( partY[i] < -128 )
//-------------------------------------- partAY[i] = -partAY[i];
img = new Image(); if( partY[i] > windHeight-128 )
img.src = "../img/ball.png"; partAY[i] = -partAY[i];
//-------------------------------------- }
partX = Array( max ); draw.globalCompositeOperation = "source-over";
partY = Array( max );
partAX = Array( max ); }
partAY = Array( max );
for( var i = 0 ; i < max ; i++ ){ </script>
partX[i] = Math.random() * (windWidth-128);
</head>
partY[i] = Math.random() * (windHeight-128);
<body onload="init()">
Ang = Math.random() * Math.PI * 2;
partAX[i] = Math.sin( ang ); <canvas id="canvas1" width="640" height="400"></canvas>
partAY[i] = Math.sin( ang ); </body>
} </html>
}
38.
39. <script language="JavaScript“
src="./Performance.js"></script>
function Performance(){
this.startTime = new Date();
var per; this.endTime = new Date();
this.fpsTime = 0;
function init() {
this.Start = function(){
per = new Performance(); this.startTime = new Date();
this.fpsTime = this.startTime - this.endTime;
this.endTime = this.startTime;
}
function Draw(){ this.GetFPS = function( fr ){
var fps; return Math.min(Math.floor(1000/this.fpsTime), fr )
per.Start(); }
fps = per.GetFPS(60); }
: 描画
draw.font = "128px 'MS Gothic'";
draw.fillStyle = "#ff0000";
draw.fillText("FPS="+fps, 100, 150);
}