I am creating an instructional slideshow with HTML5 canvas. Each slide has animated 2D elements moving an scaling and a navigation pointing to each slide. Ultimately, I'd like to create this without using Animate CC, just incase the program goes away and I'd have to start from scratch if edits need to be made (like Edge files). I'd like to manually code this with HTML5, CSS, and JavaScript preferably utilizing CreateJS.
I've located tutorials on simple slideshows and animated transitions, but I'm moreso looking for animation taking place in each slide or scene.
Is this possible? Is there a tutorial out there? Thank you in advance.
You absolutely don't have to use Adobe Animate to create animated content with CreateJS.
Here is a revised version of #hadders's code using CreateJS. Note that you need to use 1.0 to get the "yoyo" effect, which TweenJS calls "bounce"
var stage, bmp;
function init() {
stage = new createjs.Stage("canvas");
createjs.Ticker.on("tick", stage);
bmp = new createjs.Bitmap("https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog_1_small.jpg");
bmp.set({ x: 50, y: 50, alpha: 1});
stage.addChild(bmp);
createjs.Tween.get(bmp, {loop:-1, bounce:true}).to({
alpha: 0,
x:500,
y:400
}, 1000);
}
init();
Here is a fiddle with it in action: https://jsfiddle.net/8xmy6xuw/
Cheers,
Use a library such as GSAP. Create an object which contains the coords which you'll use to position the canvas elements e.g. {x:100, y:100} then use GSAP to tween the x/y values of the object. The canvas element can then be positioned/animated using this tweened coord object.
This seems like a decent enough example :
https://codepen.io/jonathan/pen/ychlf
HTML
<div id="canvas-wrapper">
<canvas id="canvas" width="800" height="600">canvas not supported</canvas>
</div>
JS
var ctx, img;
function init() {
ctx = document.getElementById("canvas").getContext("2d");
img = new Image();
img.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog_1_small.jpg";
img.xpos = 50;
img.ypos = 50;
img.globalAlpha = 1.0;
img.onload = function() {
TweenLite.ticker.addEventListener("tick",loop);
}
TweenMax.to(img, 1 ,{
globalAlpha:0,
xpos:500,
ypos:400,
repeat:-1,
yoyo:true
});
}
function loop(){
ctx.clearRect(0,0,800,600);
ctx.globalAlpha = img.globalAlpha;
ctx.drawImage(img, img.xpos, img.ypos);
}
init();
hope that helps
Related
I'm looking to get some help or guidance on the use of the excellent libgif.js library.
My objective is to take a page that has an animated gif and a png of text with transparent background, and then show the 2 images overlaid such that the resulting image can be copied to the clipboard.
I've succeeded in doing this with a static image as a template
However, if I try this with a gif, it merges the animated gif with the text image, but freezes the gif.
I've familiarized myself with the libgif.js library and have succeeded in using it to build a canvas from an animated gif and have it remain animated.
However, the text image is not being displayed in the final canvas, and I'm a little lost as to how I might go about fixing this.
Is it obvious to anyone why the textImage is being properly sized and (somewhat) apparently placed on the canvas, but not displayed in the final result?
As a side question, does anyone know why the progress bar completes quickly at first and then progresses more slowly a second time?
The HTML is rather long, but the JS from the JSFiddle is shown below (for those not willing to click through to the link).
function doit() {
var isGIF = true; // always true for now TODO: better way to test if-gif than regex for ".gif"
var previewContainer = document.getElementById("previewContainer");
var textImage = document.getElementById("textImage");
var templateImage = document.getElementById("templateImage");
var w = document.getElementById("templateImage").width;
var h = document.getElementById("templateImage").height;
previewContainer.removeChild(previewContainer.children[1]);
if (isGIF) {
var gif = new SuperGif({
gif: templateImage,
progressbar_height: 5,
auto_play: true,
loop_mode: true,
draw_while_loading: true
});
gif.load();
var canvas = gif.get_canvas();
var context = canvas.getContext('2d');
context.drawImage(textImage, 0, 0, w, h);
previewContainer.replaceChild(canvas, previewContainer.children[0]);
}
}
Note: this solution was originally based on Arend's solution in the comments of this question from this JSFiddle.
You would have to tweak the library in order to get access to their rendering loop (like a frame_rendered event).
This way, you would be able to add whatever you want over the image the library drawn at every frame.
But since I'm too lazy to dig in there, here is a workaround :
Instead of appending the canvas returned by the library in the document, you can keep it offscreen, and draw it on an other, visible, canvas.
It is on this new canvas that you will also draw your textImage, in an rAF loop.
function doit() {
var previewContainer = document.getElementById("previewContainer");
var textImage = document.getElementById("textImage");
var templateImage = document.getElementById("templateImage");
var w = templateImage.width;
var h = templateImage.height;
previewContainer.removeChild(previewContainer.children[1]);
var gif = new SuperGif({
gif: templateImage,
progressbar_height: 5,
auto_play: true,
loop_mode: true,
draw_while_loading: true
});
gif.load();
var gif_canvas = gif.get_canvas(); // the lib canvas
// a copy of this canvas which will be appended to the doc
var canvas = gif_canvas.cloneNode();
var context = canvas.getContext('2d');
function anim(t) { // our animation loop
context.clearRect(0,0,canvas.width,canvas.height); // in case of transparency ?
context.drawImage(gif_canvas, 0, 0); // draw the gif frame
context.drawImage(textImage, 0, 0, w, h); // then the text
requestAnimationFrame(anim);
};
anim();
previewContainer.replaceChild(canvas, previewContainer.children[0]);
}
<script src="https://cdn.rawgit.com/buzzfeed/libgif-js/master/libgif.js"></script>
<div>
<input type="submit" id="doit" value="Do it!" onclick="doit()" />
</div>
<div id="previewContainer">
<img id="templateImage" src="https://i.imgur.com/chWt4Yg.gif" />
<img id="textImage" src="https://i.stack.imgur.com/CmErq.png" />
</div>
<canvas id="myCanvas" width ="320" height="260">
<img src="#Model.img.path" id="img" >
I am trying to use MVC model to create "update news" page.
News has an image and i am using canvas to upload images that because users can edit images with editor based on canvas process. Creating news is Ok.But when updating news, i would like to see image in my canvas that already created . i took my entity and pass it to the View of "update news"-news includes img path- but i cant figure out how can i use this path to show my image in the canvas element.
Thanks alredy.
Sorry for my english.
var img = new Image()
img.onload = function () {
ctx.drawImage(img, 0, 0, 1600, 900);
}
img.src = "#Model.image.path";
I just use this simple code. It works.
for drawing image in canvas with javascript , you can use this function:
function drawDataURIOnCanvas(strDataURI, canvas) {
"use strict";
var img = $("#img");
img.addEventListener("load", function () {
canvas.getContext("2d").drawImage(img, 0, 0);
});
}
for calling :
drawDataURIOnCanvas('#Model.img.path',$("#myCanvas"));
I'm making a game that uses pixi and it renders on a canvas that's 640x480 pixels. As you can imagine, this is very small when viewed on a PC. I'd like to accomplish this:
I want to increase the size of the canvas so it fills up the whole screen
I want to zoom in on the content so that it fills up as much as possible without changing its aspect ratio
I'd like to center the canvas if there's left over space from the previous step
When I google for how to do this in pixi, I can find each of these individually. But I'd like to have the information on how to do this all in one place and on stackoverflow, because you usually want to do all of these things together.
I modified the source code in this example made by the creator: http://www.goodboydigital.com/pixi-js-tutorial-getting-started/ (source download)
Here's what I came up with:
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 1</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300);
renderer.resize(800, 600);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);
// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// move the sprite t the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;
var container = new PIXI.DisplayObjectContainer();
container.scale.x = 2;
container.scale.y = 2;
container.addChild(bunny);
stage.addChild(container);
function animate() {
requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1;
// render the stage
renderer.render(stage);
}
</script>
</body>
</html>
Now the one thing I didn't do is center it. I see two potential ways to do this. I could use CSS to center the canvas (what I'll probably use), or I could do this in code by adding another outer display object to the stage that centers container.
I am using fabric js for canvas animation and I am created canvas with id 'canvas' then put image in it and set left position to zero. It's working fine but animate function is not working.
Please help me.
My code:
HTML:
<canvas id="canvas" width="990" height="285">
This text is displayed if your browser
does not support HTML5 Canvas.
</canvas>
javascript:
var canvas = new fabric.Canvas('canvas');
var image = new Image();
image.src = 'images/body.png';
var bugBody = fabric.Image.fromURL(image.src, function (oImg) {
canvas.add(oImg);
oImg.set('left',0)
});
bugBody.animate('left', 200, {
onChange: canvas.renderAll.bind(canvas)
});
Thanking You.
I think that this happen because your image is not complete loaded.
So, you can put your animation code inside your callback function.
Check this jsfiddle: http://jsfiddle.net/9x9Qc/
Like this:
var srcImg = "http://fabricjs.com/lib/pug.jpg";
// canvas
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL(srcImg, function (oImg) {
canvas.add(oImg);
oImg.set('left',0);
oImg.set('top', 100);
oImg.scale(.25);
canvas.renderAll();
// and then, we can animate the image
oImg.animate('left', 200, {
onChange: canvas.renderAll.bind(canvas)
});
});
I can make a obj to use the canvas to draw like this:
MyObj.myDiv = new Canvas($("effectDiv"), Setting.width, Setting.height);
Then, I use this to draw a rectangle on the canvas:
var c = new Rectangle(80, 80,
{
fill: [220, 40, 90]
}
);
var move = new Timeline;
move.addKeyframe(0,
{
x: 0,
y: 0
}
);
c.addTimeline(move);
MyObj.myDiv.append(c);
But after I draw the rectangle, I want clear the canvas, but I don't know which method and how to do this... ...
O...one more thing:
it is the CAKE's web site:
Link
Clearing the canvas:
canvas.clear = true; // makes the canvas clear itself on every frame
canvas.fill = somecolor; // fills the canvas with some color on every frame
// with canvas.clear = false and low-opacity fill, fancy motion blur effect
Removing the rectangle from the canvas:
rectangle.removeSelf();
or
canvas.removeChild(rectangle);
You can try this method:
MyObj.myDiv.clearRect(0, 0, canvas.width, canvas.height);
Which effectively colours the entire canvas in the background colour.
Easiest way is:
MyObj.myDiv.width = MyObj.myDiv.width;
I found that resizing the canvas works like magic, even if you're not really changing the size:
canvas.width = canvas.width