update: 6/2022
ゲーム盤のイメージです。
800x600pixを 40x30pix 400個のマス目に区切ります。
stroke()関数の描画と画像ファイル gif,png,jpg,bmp(24bit,256色)で比較しました。
100回重ね書きしています。
//描画関数
ctx.beginPath();
ctx.strokeStyle = "rgba(0,0,0,1)";//R,G,B,Alpha
ctx.lineWidth = 1;
for(let j=0 ; j<100 ;j++){
for(let i=0 ; i<=20 ;i++){
const mx=i*40;
const my=50+i*30;
ctx.moveTo(mx,50);
ctx.lineTo(mx,650);
ctx.moveTo(0,my);
ctx.lineTo(800,my);
ctx.stroke();
}}
ctx.closePath();
/* 画像ファイルによる
for(let j=0 ; j<100 ;j++){
var img = new Image();
img.src = "./pic/js02.bmp";
ctx.drawImage(img,0,50);
}
*/
～結果表示～ [ms]単位
[速度改善=85.4%]...stroke()-jpg の比較
処理回数が画像が１命令なのに対して、stroke()400回では大きな差になりました。
ファイル形式はJPG,GIF,BMP(24bit)が早いですが、サイズを見るとgifが優秀です。
gif と png のパテント訴訟を聞いたことがありますが、PNGは処理が複雑なのかな？
パテントサロン トピック GIF特許問題
画像形式：富士通ソフトウェアマニュアルより
@tmlbworks