Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I need to make the gif image by canvas from this.
Is there any way to convert css3 animation to canvas animation?
I am looking for some awesome text animations, but it always made by css3. I just wonder there is an easy way to convert or I need to rewrite it by myself.
Thanks !
Here's one way to use html5 canvas to capture animations into a .GIF
The Greensock Animation Library is an excellent animation library that can manipulate DOM elements just like CSS3 animations.
But importantly for you, Greensock can also animate any javascript object.
This means that you can:
Create a JS object that draws individual animation frames on html5 canvas based on that JSObject's properties. For example:
// create a JSObject capable of drawing a rotating rectangle
var RotatingRect={
cx:canvas.width/2,
cy:canvas.height/2,
w:50,
h:35,
ww:-50/2,
hh:-35/2,
rangle:0,
draw:function(){
ctx.clearRect(0,0,cw,ch);
ctx.translate(this.cx,this.cy);
ctx.rotate(this.rangle);
ctx.beginPath();
ctx.rect(this.ww,this.hh,this.w,this.h);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.rotate(-this.rangle);
ctx.translate(-this.cx,-this.cy);
ctx.setTransform(1,0,0,1,0,0);
},
}
Use Greensock to drive the animation by changing the JSObject's properties.
and then requesting that redrawing each "frame" on the canvas. Greensock has an onUpdate event triggers each time Greensock
// Use Greensock to animate from RotatingRect's current angle
var tl=TweenLite.to(RotatingRect,5,{
paused:true,
rangle:PI2*2,
ease:"Quart.easeOut",
onUpdate:function(){this.target.draw();},
onComplete:function(){log('complete',RotatingRect);}
}
);
Optionally, use GifJS to add a new GIF frame whenever the Greensock causes a new canvas frame to be drawn.
// Add to the bottom of RotatingRect.draw()
// Add a GIF frame from the current canvas content
gif.addFrame(canvasElement);
Tools:
The Greensock Animation Library
The gifJS Script
The Html5 Canvas element
Here is example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.fillStyle='skyblue';
ctx.strokeStyle='lightgray';
ctx.lineWidth=3;
var PI=Math.PI;
var PI2=PI*2;
var RotatingRect={
cx:canvas.width/2,
cy:canvas.height/2,
w:50,
h:35,
ww:-50/2,
hh:-35/2,
rangle:0,
draw:function(){
ctx.clearRect(0,0,cw,ch);
ctx.translate(this.cx,this.cy);
ctx.rotate(this.rangle);
ctx.beginPath();
ctx.rect(this.ww,this.hh,this.w,this.h);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.rotate(-this.rangle);
ctx.translate(-this.cx,-this.cy);
ctx.setTransform(1,0,0,1,0,0);
},
}
// Use Greensock to animate from RotatingRect's current angle
var tl=TweenLite.to(RotatingRect,5,{
paused:true,
rangle:PI2*2,
ease:"Quart.easeOut",
onUpdate:function(){this.target.draw();},
onComplete:function(){log('complete',RotatingRect);}
}
);
RotatingRect.draw();
$('#play').click(function(){ tl.play(); });
$('#replay').click(function(){ tl.restart(); });
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<button id=play>Play</button>
<button id=replay>Replay</button>
<br><canvas id="canvas" width=300 height=300></canvas>
Related
Im trying to build a simple 3d shape builder (it would always be a rectangle / square that needs to be built) all I want is for the user to be able enter the height, width and depth and the shape is built in real time for them as a line drawing. I have been looking online and found this jsfiddle which is great however I would need it to work in 3d (not just 2d) http://jsfiddle.net/m1erickson/f6E6Y/ but along those lines. Im however completly stuck and left scratching my head on this one...
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=2;
var height=35;
var $width=document.getElementById('width');
var $height=document.getElementById('height')
$width.value=width;
$height.value=height;
draw();
$width.addEventListener("keyup", function(){
width=this.value;
draw();
}, false);
$height.addEventListener("keyup", function(){
height=this.value;
draw();
}, false);
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(40,40,width,height);
}
Any ideas?
Dealing with 3D is much easier with a library. Three.js is a popular one. They also have a demo for what you've described: http://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry
The controls on the top-right will allow you to adjust the dimensions of the object in real-time. Modifying this example will be much more easier than writing it from scratch, unless you'd like to learn vanilla WebGL.
When I run this code it produces the lines "rotating" from 0 degrees to 180, the problem is the previous line does not get cleared (so the ctx.clearRect(0,0,400,200) does not work. In the console log it shows up as running (when I try to debug) but it is not actually clearing it. Does anyone have any idea how to fix this?
var canvas = document.getElementById("radarImage");
var ctx = canvas.getContext("2d");
var angle = 0
function incrementAngle(){
angle++;
if(angle>180){
angle=0;
}
}
function rotateRadar(){
incrementAngle();
ctx.clearRect(0,0,400,200);
ctx.save();
ctx..translate(-200,-200);
ctx.rotate((Math.PI/180)*angle);
ctx.translate(-200,-200);
ctx.moveTo(200,200);
ctx.lineTo(0,200);
ctx.stroke();
ctx.restore;
}
setInterval(rotateRadar,200);
Edit: You should call your updates constantly using request animation frame: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
If you are open to using a library for working with canvas then easel js is could be a possibility: http://www.createjs.com/easeljs
Another SO user asked a similar question for Easel Js and there are some good answers that may be relavant to you: EaselJS - Rotate a shape around its center
Simply you cant rotate a line cont in canvas, you have to read sin,cos to rotate a line in canvas.
Hope this should help you.JsFiddle
context.clearRect(0,0,400,200);
context.beginPath();
context.moveTo(x,y);
x1=Math.cos(startAngle)*radius+10;
y1=Math.sin(startAngle)*radius+10;
console.log(x1,y1);
context.lineTo(x1,y1);
context.stroke();
I am looking for a jquery image eraser plugin that can erase parts of an actual image. For example, if a user uploads an image of a monkey and decides that he does not want the tail, then he should be able to move the mouse over the tail and erase it. To keep it simple, lets assume that all images are black and white and background is always white.
I have searched for quite some time and most "jquery eraser" plugins point to a canvas eraser and not a true image eraser.
For example: http://minimal.be/lab/jQuery.eraser/
this creates a canvas on top of an image and you can then erase the canvas - this is NOT the requirement
Couple of other threads on stackoverflow are interesting: like
How to erase partially image with javascript and result of erase pixel is transperent?
Is there a plugin that can do this with canvas
I don't know of a non-canvas plugin that does just image erasing.
I don't think its easily done on the client-side without the canvas element because html5 canvas is the only native element that can edit an existing image at the pixel level and then save the edited image.
As you've discovered, it's easy enough to do using html5 canvas:
drawImage an image onto a canvas element,
Use destination-out compositing to let the user erase part of the image,
Convert the edited canvas to an actual img element with .toDataURL
Here's a simple proof-of-concept for you to start from:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/monkey.jpg";
function start(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-out';
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#save").click(function(){
alert('This save-to-image operation is prevented in Stackoverflows Snippet demos but it works when using an html file.');
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
ctx.beginPath();
ctx.arc(x,y,15,0,Math.PI*2);
ctx.fill();
}
body{ background-color: white; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on image to erase 10 pixels around mouse</h4>
<canvas id="canvas" width=300 height=300></canvas>
<br>
<button id='save'>Save edited canvas as an image</button>
markE's answer actually shows how to start to build your own flexible image eraser plugin and its an excellent start.
I also found a jquery plugin that i am currently testing and using to do what my original question was.
It is called wPaint
http://www.jqueryscript.net/other/jQuery-Plugin-for-Simple-Drawing-Surface-wPaint.html
It uses canvas and all i have to do is make the background-color white and use the eraser tool to accomplish the erasing and then save the image back
I'm having a bit of trouble here to develop this functionality since it must work on IE9+ so css clip-path is not an option ( http://caniuse.com/#feat=css-clip-path ).
The issue:
I need to create a grid composed of 6 elements.
Each element is an image.
The images can be different according to user answers before getting to the grid page.
Eeach element / image must be clicable and will acquire a "selected" class that will overlay div with text and background image.
image:
What is the best way to achieve this?
One way to do this could be to save out each combination of the six images you require into one big image. Then, depending on the user's answer combination, you insert the corresponding image as a background-image of a div. You then overlay click-able hotspots within the same div that roughly correlate to the dividing edges.
This may however not be the most practical solution and largely depends on how many answers/images you are dealing with.
Alternatively you could draw SVG shapes and set their fills to the images you require.
I can recommend Raphael.js as a starting point. You should be able to find what you need in the documentation
Another option would be to use HTML5 canvas:
http://jsfiddle.net/julienbidoret/GKP7X/1/
(credit goes to julienbidoret for the jsfiddle)
Javascript:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function () {
ctx.save();
ctx.beginPath();
ctx.moveTo(20, 0);
ctx.lineTo(240, 0);
ctx.lineTo(220, 240);
ctx.lineTo(0, 240);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0);
ctx.restore();
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/2/2b/Clouds.JPG";
HTML:
<canvas id="c" width="300" height="300" ></canvas>
Both SVG and canvas are supported in IE9.
I have a 2D occupancy map like this (left side)
So far it is content drawn pixel by pixel in a canvas of the robot's web interface.
What I would like to achive is a pan/tilt/rotatable pseudo 3D view of it. Where each occupied block gets a rect. So something like this.
I don't even know where to start. Is this doable in pure html5? … Any guidance would help.
Some facts on my setup:
webserver of the robot is a flask (python) server on a raspberry pi
client browsers are Chrome (on windows) or Safari on iPad
calculation should take place on client side
Thanks
Robert
Is this doable in pure html5?
Sure since 3d is just a 2d projection. Check WebGL and http://threejs.org/ if you need a javascript library.
You can "fake" an extrusion in 2d canvas by drawing repeated-offset version of your floorplan.
You can lighten the corners a bit for effect.
Demo: http://jsfiddle.net/m1erickson/7wxGS/
Example code:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="gray";
draw();
ctx.strokeStyle="black"
for(var i=.5;i<10;i+=.5){
ctx.save();
ctx.translate(-i,-i);
draw();
ctx.restore();
}
function draw(){
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(125,100);
ctx.lineTo(125,125);
ctx.lineTo(145,125);
ctx.lineTo(145,145);
ctx.lineTo(125,145);
ctx.lineTo(125,175);
ctx.lineTo(100,175);
ctx.closePath();
ctx.stroke();
// exterior corners
corner(100,100);
corner(145,145);
corner(125,175);
}
function corner(x,y){
ctx.save();
ctx.beginPath();
ctx.fillStyle="#ddd";
ctx.fillRect(x,y,1,1);
ctx.restore();
}