[TOC]
TieLiFa(铁力发) is a library implements Javascript canvas rendering context 2d with webgl.
Import tielifa.js or tielifa.min.js, create a new context object like this :
let canvas = document.getElementById('someid');// Get the canvas element object
let ctx = new tielifa.WebGL2D(canvas);Use this ctx to draw something like the CanvasRendingContext2D.
CanvasRendingContext2D:
ctx.save();
ctx.translate(10,10);
ctx.fillStyle = 'red';
ctx.rect(0,0,100,100);
ctx.fill();
ctx.restore();TieLiFa:
ctx.save();
ctx.translate(10,10);
ctx.fillStyle = 'red';
ctx.rect(0,0,100,100);
ctx.fill();
ctx.restore();
ctx.draw();TieLiFa does not paint immediately when user invoke fill,stroke or drawImage, it need user to invoke draw method.
NOTE: Every example does't have HTML code , the canvas instance was generated by 'test.js' which created by me, one canvas id is 'webgl' , another one is 'canvas'.
TieLiFa implemented canvas 2d some frequently used methods and properties ,such as fillStyle,drawImage , fillRect and so on , you can check what's TieLiFa has implemented from this tabel.
void drawRectangle(x, y, w, h, fillColor, strokeColor)
x The x-axis coordinate of the rectangle left-top point.
y The y-axis coordinate of the rectangle left-top point.
w Rectangle width.
h Rectangle height.
fillColor The color of filling of the rectangle.(Optional)
strokeColor The color of the rectangle's border.(Optional)
Draw a 200x150 size red rectangle with white border.
// webgl is a canvas instance
let ctx = new tielifa.WebGL2D(webgl);
ctx.drawRectangle(100, 100, 200, 150, 'red', 'white');
ctx.draw();Result on codepen : Draw Rectangle
void drawEllipse(x, y, r1, r2, fillColor, strokeColor, rotation)
x The x-axis coordinate of the ellipse's center point.
y The y-axis coordinate of the ellipse's center point.
r1 The x-axis radius.
r2 The y-axis radius.
fillColor The color of filling of the ellipse.(Optional)
strokeColor The color of the ellipse's border.(Optional)
rotation The rotated radian of the ellipse.(Optional)
Draw a 200x50 size red ellipse with white border , and rotate 45 degree.
// webgl is a canvas instance
let ctx = new tielifa.WebGL2D(webgl);
ctx.drawEllipse(200, 200, 200, 50, 'red', 'white',45*Math.PI/180);
ctx.draw();Result on codepen : Draw Ellipse
void drawCircle(x, y, r, fillColor, strokeColor)
x The x-axis coordinate of the circle's center point.
y The y-axis coordinate of the circle's center point.
r The circle's radius.
fillColor The color of filling of the ellipse.(Optional)
strokeColor The color of the ellipse's border.(Optional)
Draw a 200 radius red circle with white border.
// webgl is a canvas instance
let ctx = new tielifa.WebGL2D(webgl);
ctx.drawCircle(200, 200, 200, 'red', 'white');
ctx.draw();Result on codepen : Draw Circle
Use a set points to define a stripe path , and fill this stripe with color or image
void fillStripe(points, stripeWidth, color, opacity, image, applyTransform)
points The stripe's path points. Each point's data struct is {x:number,y:number,z:number}, thezis optional.
stripeWidth The width of this stripe.
color The fill color string of this stripe, if don't provide this value , its default value is 'white'.(Optional)
opacity Opacity of this stripe.(Optional)
image Use a image to fill this stripe, if the color paramater is not null or 'white', the image will blend with the color.(Optional)
applyTransform It's a boolean value, if it's true , the stripe's position will apply current context state's transform.(Optional)
Draw a fluttering image
// webgl is a canvas instance
let ctx = new tielifa.WebGL2D(webgl, {FOV:20,projectionType: 1, enableDepthTest: true});
let r = 30;
let points = [];
let offset = 0;
function draw() {
ctx.save();
ctx.translate(webgl.width / 2, webgl.height / 2);
ctx.rotateY(r * Math.PI / 180);
ctx.rotateX(r * Math.PI / 180);
ctx.rotate(r * Math.PI / 180);
ctx.translate(-webgl.width / 2, -webgl.height / 2);
points.length = 0;
let width = webgl.width / 3;
let height = (img.height / img.width) * width;
let delta = Math.PI / 15;
let pointsNum = 50;
let deltaX = width / pointsNum;
let totalPI = Math.PI * 2 * 3;
let deltaTheta = totalPI / pointsNum;
let startX = (webgl.width - width) / 2;
for (let i = 0; i < pointsNum; i++) {
let x = startX + deltaX*i;
let y = Math.cos(i * deltaTheta + offset) +webgl.height / 2;
let z = Math.cos(i * deltaTheta + offset) * 15;
let p = {x: x, y: y, z: z};
pre = p;
points.push(p);
}
ctx.fillStripe(points, height, 'white', 1,img);
r+=0.2;
ctx.restore();
ctx.draw();
offset += 0.15;//delta / 10;
requestAnimationFrame(draw);
}
let img = new Image();
img.onload = function (evt) {
draw();
};
img.crossOrigin = '';
img.src = 'https://eclipseglory.github.io/norway.png'Result on codepen : Use fillStripe
Rotate with x-aixs.
void rotateX(radian)
radian Rotate degree.
Draw a 200x200 size rectangle and make it rotate 5 degree with its center point.
// webgl is a canvas instance
let ctx = new tielifa.WebGL2D(webgl,{projectionType:1});
ctx.translate(200,200);
ctx.rotateY(5*Math.PI/180);
ctx.rotateX(5*Math.PI/180);
ctx.translate(-200,-200);
ctx.drawRectangle(100, 100, 200, 200,'red');
ctx.draw();Result on codepen : RotateX and RotateY
Rotate with y-aixs.
void rotateY(radian)
radian Rotate degree.
Draw a 200x200 size rectangle and make it rotate 5 degree with its center point.
// webgl is a canvas instance
let ctx = new tielifa.WebGL2D(webgl,{projectionType:1});
ctx.translate(200,200);
ctx.rotateY(5*Math.PI/180);
ctx.rotateX(5*Math.PI/180);
ctx.translate(-200,-200);
ctx.drawRectangle(100, 100, 200, 200,'red');
ctx.draw();Result on codepen : RotateX and RotateY
Can apply a filter on a image. There are around 10 filter type provided by TieLiFa , such as Sharpness_Filter,Emboss_Filter and so on.
ctx.filterType
Draw two 200x200 size images , one apply Emboss filter , another don't apply filter:
// webgl is a canvas instance
var ctx = new tielifa.WebGL2D(webgl,{projectionType:1});
var img = new Image();
img.onload = function (evt) {
ctx.filterType = tielifa.WebGL2D.Emboss_Filter;
ctx.drawImage(img,100,100,200,200);
ctx.filterType = tielifa.WebGL2D.Normal_Filter;
ctx.drawImage(img,300,100,200,200);
ctx.draw();
};
img.crossOrigin = '';
img.src = 'https://eclipseglory.github.io/candy.png'Result on codepen : Emboss or normal
| Property | Support | Example |
|---|---|---|
canvas |
✔️ | |
fillStyle |
✔️ | fill a rectangle |
font |
❌ | |
globalAlpha |
✔️ | two rectangles |
globalCompositeOperation |
❌ | |
imageSmoothingEnabled |
❌ | |
lineCap |
❌ | |
lineDashOffset |
❌ | |
lineJoin |
❌ | |
lineWidth |
✔️ | rect and line |
miterLimit |
❌ | |
shadowBlur |
❌ | |
shadowColor |
❌ | |
shadowOffsetX |
❌ | |
shadowOffsetY |
❌ | |
strokeStyle |
✔️ | rect and line |
textAlign |
✔️ | |
textBaseline |
✔️ |
| Method | Support | Example |
|---|---|---|
arc() |
✔️ | some arcs |
arcTo() |
✔️ | change arc radius |
beginPath() |
✔️ | tow lines |
bezierCurveTo() |
✔️ | cubic bezier |
clearRect() |
just clear whole canvas | |
clip() |
❌ | |
closePath() |
✔️ | a triangle |
createImageData() |
✔️ | |
createLinearGradient() |
❌ | |
createPattern() |
❌ | |
createRadialGradient() |
❌ | |
drawFocusIfNeeded() |
❌ | |
drawImage() |
✔️ | rotating image |
ellipse() |
✔️ | Example1 Example2 |
fill() |
✔️ | fill a rectangle |
fillRect() |
✔️ | two rectangles |
fillText() |
✔️ | |
getImageData() |
❌ | |
getLineDash() |
❌ | |
isPointInPath() |
❌ | |
isPointInStroke() |
❌ | |
lineTo() |
✔️ | tow lines |
measureText() |
✔️ | |
moveTo() |
✔️ | tow lines |
putImageData() |
❌ | |
quadraticCurveTo() |
✔️ | quadratic bezier |
rect() |
✔️ | rect and line |
restore() |
✔️ | save/restore color |
rotate() |
✔️ | rotate rectangle |
save() |
✔️ | save/restore color |
scale() |
✔️ | scale rect |
setLineDash() |
❌ | |
setTransform() |
✔️ | skewing rect |
stroke() |
✔️ | tow lines |
strokeRect() |
✔️ | |
strokeText() |
❌ | |
transform() |
✔️ | skewing rect |
translate() |
✔️ | rotating image |