Update more layouts
This commit is contained in:
parent
39ed6150ed
commit
394ab3d1b7
|
@ -1,16 +1,28 @@
|
|||
---
|
||||
title: Animated gifs
|
||||
title: Animated GIFs
|
||||
category: CLI
|
||||
layout: 2017/sheet
|
||||
---
|
||||
|
||||
### Convert mp4 to gif
|
||||
## Animated GIFs
|
||||
{: .-one-column}
|
||||
|
||||
mkdir -p gif
|
||||
mplayer -ao null -vo gif89a:outdir=gif $mp4
|
||||
mogrify -format gif *.png
|
||||
gifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif > ${mp4%.*}.gif
|
||||
rm -rf gif
|
||||
### Convert MP4 to GIF
|
||||
|
||||
### Or a given range (-ss -endpos)
|
||||
```bash
|
||||
mkdir -p gif
|
||||
mplayer -ao null -vo gif89a:outdir=gif $INPUT
|
||||
mogrify -format gif *.png
|
||||
gifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif > ${INPUT%.*}.gif
|
||||
rm -rf gif
|
||||
```
|
||||
|
||||
mplayer -ao null -ss 0:02:06 -endpos 0:05:00 -vo gif89a:outdir=gif videofile.mp4
|
||||
You'll need `mplayer`, `imagemagick` and `gifsicle`. This converts frames to .png, then turns them into an animated gif.
|
||||
|
||||
### A given range
|
||||
|
||||
```bash
|
||||
mplayer -ao null -ss 0:02:06 -endpos 0:05:00 -vo gif89a:outdir=gif videofile.mp4
|
||||
```
|
||||
|
||||
See `-ss` and `-endpos`.
|
||||
|
|
134
canvas.md
134
canvas.md
|
@ -1,103 +1,135 @@
|
|||
---
|
||||
title: Canvas
|
||||
category: JavaScript
|
||||
layout: 2017/sheet
|
||||
---
|
||||
|
||||
### Getting the context
|
||||
|
||||
var canvas = document.getElementById('c');
|
||||
var c = canvas.getContext("2d");
|
||||
```js
|
||||
var canvas = document.getElementById('c')
|
||||
var c = canvas.getContext('2d')
|
||||
```
|
||||
|
||||
### Basic drawing
|
||||
|
||||
// x = 10, y = 20, width = 200, height = 100
|
||||
c.fillStyle = '#ff0000';
|
||||
c.strokeStyle = '#ff00ff';
|
||||
```js
|
||||
// x = 10, y = 20, width = 200, height = 100
|
||||
c.fillStyle = '#ff0000'
|
||||
c.strokeStyle = '#ff00ff'
|
||||
```
|
||||
|
||||
c.lineWidth = 5;
|
||||
c.lineCap = 'round';
|
||||
```js
|
||||
c.lineWidth = 5
|
||||
c.lineCap = 'round'
|
||||
```
|
||||
|
||||
c.fillRect(10, 20, 200, 100);
|
||||
```js
|
||||
c.fillRect(10, 20, 200, 100)
|
||||
```
|
||||
|
||||
c.stroke();
|
||||
c.fill();
|
||||
```js
|
||||
c.stroke()
|
||||
c.fill()
|
||||
```
|
||||
|
||||
### Saving and restoring
|
||||
|
||||
c.save();
|
||||
```js
|
||||
c.save()
|
||||
```
|
||||
|
||||
// Saves:
|
||||
// strokeStyle fillStyle globalAlpha lineWidth lineCap lineJoin miterLimit
|
||||
// shadowOffsetX shadowOffsetY shadowBlur shadowColor
|
||||
// globalCompositeOperation
|
||||
// Transformations: translate rotate scale transform setTransform
|
||||
// Clipping path
|
||||
```js
|
||||
c.restore()
|
||||
```
|
||||
|
||||
Saves: `strokeStyle` `fillStyle` `globalAlpha` `lineWidth` `lineCap` `lineJoin` `miterLimit` `shadowOffsetX` `shadowOffsetY` `shadowBlur` `shadowColor`
|
||||
`globalCompositeOperation`, Transformations (`translate` `rotate` `scale` `transform` `setTransform`), Clipping path
|
||||
|
||||
c.restore();
|
||||
|
||||
### Animation
|
||||
|
||||
onframe: function() {
|
||||
c.clearRect(0, 0, w, h);
|
||||
}
|
||||
```js
|
||||
onframe: function() {
|
||||
c.clearRect(0, 0, w, h)
|
||||
}
|
||||
```
|
||||
|
||||
### Transformations
|
||||
|
||||
c.translate(0, 0)
|
||||
c.rotate(Math.PI*2/5)
|
||||
c.scale(1.0, 1.0)
|
||||
```js
|
||||
c.translate(0, 0)
|
||||
c.rotate(Math.PI*2/5)
|
||||
c.scale(1.0, 1.0)
|
||||
```
|
||||
|
||||
To rotate along origin:
|
||||
|
||||
c.translate(ox, oy)
|
||||
c.rotate(theta)
|
||||
c.translate(-ox, -oy)
|
||||
```js
|
||||
c.translate(ox, oy)
|
||||
c.rotate(theta)
|
||||
c.translate(-ox, -oy)
|
||||
```
|
||||
|
||||
To scale along origin:
|
||||
|
||||
c.translate(-ox*x, -oy*y)
|
||||
c.scale(x, y)
|
||||
c.translate(ox/x, oy/y)
|
||||
```js
|
||||
c.translate(-ox*x, -oy*y)
|
||||
c.scale(x, y)
|
||||
c.translate(ox/x, oy/y)
|
||||
```
|
||||
|
||||
See [MDN: Transformations][xform].
|
||||
|
||||
### Image drawing
|
||||
|
||||
c.drawImage(image, dx, dy, [dw, dh]);
|
||||
/* `image` can be HTML Image/Canvas/Video */
|
||||
```js
|
||||
c.drawImage(image, dx, dy, [dw, dh]);
|
||||
/* `image` can be HTML Image/Canvas/Video */
|
||||
```
|
||||
|
||||
See [MDN: Images][images].
|
||||
|
||||
### Colors, styles shadows
|
||||
|
||||
c.strokeStyle = '#ff00ff';
|
||||
c.fillStyle = '#ff00ff';
|
||||
```js
|
||||
c.strokeStyle = '#ff00ff';
|
||||
c.fillStyle = '#ff00ff';
|
||||
```
|
||||
|
||||
c.shadowOffsetX = 0;
|
||||
c.shadowOffsetY = 0;
|
||||
c.shadowOffsetBlur = 3.0;
|
||||
c.shadowColor = 'rgba(0,0,0,0.2)';
|
||||
```js
|
||||
c.shadowOffsetX = 0;
|
||||
c.shadowOffsetY = 0;
|
||||
c.shadowOffsetBlur = 3.0;
|
||||
c.shadowColor = 'rgba(0,0,0,0.2)';
|
||||
```
|
||||
|
||||
See [MDN: Styles][styles].
|
||||
See [MDN: Styles][styles]
|
||||
|
||||
### Gradients
|
||||
|
||||
gr = c.createLinearGgadient(x0,y0,x1,y1)
|
||||
gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
|
||||
pat = c.createPattern(image, 'repeat-x')
|
||||
```js
|
||||
gr = c.createLinearGradient(x0,y0,x1,y1)
|
||||
gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
|
||||
pat = c.createPattern(image, 'repeat-x')
|
||||
```
|
||||
|
||||
c.fillStyle = gr
|
||||
```js
|
||||
c.fillStyle = gr
|
||||
```
|
||||
|
||||
### Drawing
|
||||
|
||||
c.beginPath()
|
||||
c.moveTo(x,y)
|
||||
c.lineTo(x,y)
|
||||
c.quadraticCurveTo(cpx,cpy,x,y)
|
||||
c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y)
|
||||
c.arcTo(...)
|
||||
c.arc(...)
|
||||
c.closePath()
|
||||
```js
|
||||
c.beginPath()
|
||||
c.moveTo(x,y)
|
||||
c.lineTo(x,y)
|
||||
c.quadraticCurveTo(cpx,cpy,x,y)
|
||||
c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y)
|
||||
c.arcTo(...)
|
||||
c.arc(...)
|
||||
c.closePath()
|
||||
```
|
||||
|
||||
### More resources
|
||||
|
||||
|
|
Loading…
Reference in New Issue