DrawImage

//DrawImage loadImage
var img;
var s;
function preload() {
img=loadImage("img/kaeru.png"); //画像を読み込む
}

function setup() {
createCanvas(300, 300);
s = createSprite(width/2, height/2); //スプライトの位置
s.addImage(img); //スプライトに画像を加える
}

function draw() {
background(220);

if (s.scale ==1){
s.scale = .5;
}

drawSprites();
}

preview

///////////////////////////
//DrawImage loadAnimation

var maru;
function preload(){
maru=loadAnimation("img/1.png", "img/10.png");
}
function setup() {
createCanvas(300, 300);
}

function draw() {
background(230,230,230);
animation(maru, width/2, height/2);
}
preview

//////////////////////////////

//DrawImage loadSpriteSheet

var explode_ss;
var explode_s;
var explode_a;

function preload() {
explode_ss=loadSpriteSheet(
'img/sheet3.png', 100, 100, 5);
explode_a=loadAnimation(explode_ss);
}

function setup() {
createCanvas(300, 300);
explode_s=createSprite(width/2, height/2, 100, 100);
explode_s.addAnimation('sheet3', explode_a);
}

function draw() {
clear();
background(210);
drawSprites();
}
preview

/////////////////////////////////

//DrawImage loadSpriteSheet loadJSON

var tile_sprite;
var tile_frames;
function preload() {
tile_frames=loadJSON('img/sheet.json');
tile_sprite=loadSpriteSheet(
'img/sheet.png', tile_frames);
}

function setup() {
createCanvas(300, 300);
}

function draw() {
clear();
background(200);
tile_sprite.drawFrame('a.png', 0, 0);
tile_sprite.drawFrame('d.png', 100, 100);
for (var x = 0; x < 300; x += 100) {
tile_sprite.drawFrame('c.png', x, 200);
}
drawSprites();
}

preview

////////////////////////////////////

//DrawImage loadSpriteSheet frames

var sprite_sheet;
function preload() {
frames=[{
"name": "a.png",
"frame": {
"x": "0",
"y": "0",
"width": "100",
"height": "100"
}
}];
sprite_sheet=loadSpriteSheet(
'img/sheet.png', frames);
}
function setup() {
createCanvas(300, 300);
noStroke();
}

function draw() {
clear();
background(200);
sprite_sheet.drawFrame('a.png', 0, 0);
drawSprites();
}

preview

///////////////////////////