[js01.js]

//draw_speed_test ver1.0 (c) tmlb-works 2021.8

window.addEventListener( "load", loadFunc, false );

//描画間隔
setInterval(drawTest, 3000);  

//基点
var x0=400; 
var y0=300;

function drawTest() {

var canvas = document.getElementById( "stage1" );
var ctx = canvas.getContext( "2d" );
var elm = document.getElementById('target');
var sec =new Date().getSeconds();


//背景
ctx.beginPath();
ctx.rect(0,0,850,650);
ctx.fillStyle = '#30f';
ctx.fill();

ctx.arc (400+400-x0,300+300-y0,380,0, Math.PI * 2, false);
ctx.fillStyle = '#77f';
ctx.fill();
ctx.closePath();

//時刻
var now_ =new Date();
var year=now_.getFullYear();
var month=now_.getMonth()+1;
var day=now_.getDate();
var Hour = now_.getHours();
var Min = now_.getMinutes();
var Sec = now_.getSeconds();
var msec =now_.getMilliseconds();
      
//var day=new Date().getDay();
ctx.fillStyle = "white";
const str="Date(" + year +"/"+ month+"/"+day+" "+Hour+":"+Min+":"+Sec+")";
ctx.fillText(str,160,10,200);

ctx.fillStyle = "white";
ctx.fillText("Start > " + sec +" : "+ msec,10,10,150);

//処理速度検証コード

for(var j=0; j<5;j++){ // 重ね書き
for(var i=0; i<50;i++){

ctx.beginPath();

//描画関数による
ctx.arc (70+i*14,150,60,0, Math.PI * 2, false);
ctx.strokeStyle='yellow';
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();

/* 画像ファイルによる
var img = new Image();
img.src = "./pic2.gif";
ctx.drawImage(img,40+i*14,120);
*/

ctx.closePath();
}


//２段目の描画
for(var i=0; i<50;i++){

ctx.beginPath();

ctx.arc (70+i*14,280,60,0, Math.PI * 2, false);
ctx.strokeStyle='yellow';
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();

/*
var img = new Image();
img.src = "./pic2.gif";
ctx.drawImage(img,40+i*14,250);
*/
ctx.closePath();
}


//３段目の描画
for(var i=0; i<50;i++){

ctx.beginPath();

ctx.arc (70+i*14,410,60,0, Math.PI * 2, false);
ctx.strokeStyle='yellow';
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
/*
var img = new Image();
img.src = "./pic2.gif";
ctx.drawImage(img,40+i*14,380);
*/
ctx.closePath();
}
}



var canvas = document.getElementById( "stage1" );
var ctx = canvas.getContext( "2d" );

now_ =new Date();
var sec1 =now_.getSeconds();
var msec1 =now_.getMilliseconds();

ctx.fillStyle = "white";
ctx.fillText("End > " + sec1 +" : "+ msec1,10,40,150);

var secd = sec1-sec;
var msecd =msec1-msec;

ctx.fillStyle = "white";
ctx.fillText("△time > " + secd +" : "+ msecd,10,70,150);


}//class 


function loadFunc() {
var canvas = document.getElementById( "stage1" );
var ctx = canvas.getContext( "2d" );
var elm = document.getElementById('target');
}

[draw_test.htm]

このファイルは html の 括弧 < > を [ ]に変えてありますので、置換してご利用ください・・・

[!DOCTYPE html]
[html lang="ja"][head][meta charset="utf-8"/][title]draw_test[/title]
[link rel="stylesheet" href="draw_test.css" type="text/css" /]
[script type="text/javascript" src="draw_test.js"][/script][/head]
[body ][canvas id="stage1" width="850" height="650"][/canvas]
[p id="target"][/p][/body][/html] 

[draw_test.css]

body {background-color: #005;}   #stage1 {margin: 20px;background-color: #ccc;}