110 lines
2.2 KiB
Markdown
110 lines
2.2 KiB
Markdown
---
|
|
title: Canvas
|
|
category: JavaScript
|
|
---
|
|
|
|
### Getting the context
|
|
|
|
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';
|
|
|
|
c.lineWidth = 5;
|
|
c.lineCap = 'round';
|
|
|
|
c.fillRect(10, 20, 200, 100);
|
|
|
|
c.stroke();
|
|
c.fill();
|
|
|
|
### Saving and restoring
|
|
|
|
c.save();
|
|
|
|
// 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);
|
|
}
|
|
|
|
### Transformations
|
|
|
|
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)
|
|
|
|
To scale along origin:
|
|
|
|
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 */
|
|
|
|
See [MDN: Images][images].
|
|
|
|
### Colors, styles shadows
|
|
|
|
c.strokeStyle = '#ff00ff';
|
|
c.fillStyle = '#ff00ff';
|
|
|
|
c.shadowOffsetX = 0;
|
|
c.shadowOffsetY = 0;
|
|
c.shadowOffsetBlur = 3.0;
|
|
c.shadowColor = 'rgba(0,0,0,0.2)';
|
|
|
|
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')
|
|
|
|
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()
|
|
|
|
### More resources
|
|
|
|
* [Canvas Cheatsheet PDF][pdf]
|
|
|
|
[pdf]: http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf
|
|
[xform]: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Transformations
|
|
[styles]: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Applying_styles_and_colors
|
|
[images]: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Using_images
|