E Corp 公司 Logo 图标自动创建工具。
参考:
https://www.html5canvastutorials.com/
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
-
<canvas>
元素:- canvas 默认大小:300 * 150 (px)
- 标签:
<canvas id="tutorial" width="150" height="150">不支持,替代内容。</canvas>
-
渲染上下文(The rendering context):
var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');
-
画布栅格(canvas grid)与坐标空间:
- 栅格的起点为左上角(坐标为(0,0))
-
矩形:
void ctx.fillRect(x, y, width, height); // 填充 void ctx.strokeRect(x, y, width, height); // 绘制边框 void ctx.clearRect(x, y, width, height); // 清除 void ctx.rect(x, y, width, height); // 绘制矩形
-
绘制路径:
void ctx.beginPath(); // 新建路径 void ctx.closePath(); // 闭合路径 void ctx.stroke(); // 绘制轮廓 void ctx.stroke(path); void ctx.fill(); // 填充 void ctx.fill(fillRule); // [null, 'nonzero', 'evenodd'] void ctx.fill(path, fillRule); void ctx.moveTo(x, y); // 移动笔触 void ctx.lineTo(x, y); // 线 // 圆弧 void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); void ctx.arcTo(x1, y1, x2, y2, radius); // 弧度(radians) to 角度(degress) radians = (Math.PI/180) * degrees; void ctx.quadraticCurveTo(cpx, cpy, x, y); // 绘制二次贝塞尔曲线 void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); // 绘制三次贝塞尔曲线
-
Path2D
:new Path2D(); // 空的 Path 对象 new Path2D(path); // 克隆 Path 对象 new Path2D(d); // 从 SVG 建立 Path 对象
-
色彩(Color):
ctx.fillStyle = color; // 填充 ctx.strokeStyle = color; // 轮廓
-
透明度(Transparency):
ctx.globalAlpha = value;
-
线型(Line styles):
ctx.lineWidth = value; // 设置线宽 ctx.lineCap = "butt"; // 设置线条末端样式 ctx.lineCap = "round"; ctx.lineCap = "square"; ctx.lineJoin = "bevel"; // 设定两线条之间合并的样式 ctx.lineJoin = "round"; ctx.lineJoin = "miter"; ctx.miterLimit = value; // 两线相交,交接处的最大长度 ctx.getLineDash(); void ctx.setLineDash(segments); ctx.lineDashOffset = value;
-
渐变(Gradients):
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1); CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1); void gradient.addColorStop(offset, color);
-
图案样式(Patterns):
CanvasPattern ctx.createPattern(image, repetition);
-
阴影(Shadows):
ctx.shadowOffsetX = offset; ctx.shadowOffsetY = offset; ctx.shadowBlur = level; ctx.shadowColor = color;
-
绘制文本:
void ctx.fillText(text, x, y [, maxWidth]); void ctx.strokeText(text, x, y [, maxWidth]); // 样式 ctx.font = value; ctx.textAlign = "left" || "right" || "center" || "start" || "end"; ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; ctx.direction = "ltr" || "rtl" || "inherit"; // 预测量文本宽度 TextMetrics ctx.measureText(text);
-
获得需要绘制的图片:
HTMLImageElement; HTMLVideoElement; HTMLCanvasElement; ImageBitmap; // 由零开始创建图像 var img = new Image(); // 创建一个<img>元素 img.onload = function(){ // 执行drawImage语句 } img.src = 'myImage.png'; // 设置图片源地址 // 通过 data: url 方式嵌入图像 img.src = 'data:image/gif;base64,R0lGODlh...XiGBYAOw==';
-
绘制图片:
void ctx.drawImage(image, dx, dy); // 缩放(Scaling) void ctx.drawImage(image, dx, dy, dWidth, dHeight); // 切片(Slicing) void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-
状态的保存和恢复(Saving and restoring state):
void ctx.save(); void ctx.restore();
-
移动(Translating):
void ctx.translate(x, y);
-
旋转(Rotating):
void ctx.rotate(angle);
-
缩放(Scaling);
void ctx.scale(x, y);
-
变形(Transforms);
// m11 m21 dx // m12 m22 dy // 0 0 1 void ctx.transform(m11, m12, m21, m22, dx, dy); void ctx.setTransform(m11, m12, m21, m22, dx, dy); void ctx.resetTransform(); // => ctx.setTransform(1, 0, 0, 1, 0, 0); // m11:水平方向的缩放 // m12:水平方向的倾斜偏移 // m21:竖直方向的倾斜偏移 // m22:竖直方向的缩放 // dx:水平方向的移动 // dy:竖直方向的移动
-
组合(Compositing):
ctx.globalCompositeOperation = type; // 裁切路径 void ctx.clip(); void ctx.clip(fillRule); void ctx.clip(path, fillRule);
-
基本的动画:
window.requestAnimationFrame(callback);
-
像素操作:
ImageData ctx.createImageData(width, height); ImageData ctx.createImageData(imagedata); ImageData ctx.getImageData(sx, sy, sw, sh); void ctx.putImageData(imagedata, dx, dy); void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight); // Uint8ClampedArray array var myImageData = ctx.createImageData(width, height); var myImageData = ctx.createImageData(anotherImageData); var imagedata = new ImageData(array, width, height); var imagedata = new ImageData(width, height); imagedata.data; imagedata.height; imagedata.width; // 保存图片 canvas.toDataURL(type, encoderOptions); canvas.toBlob(callback, type, encoderOptions);
-
点击区域(hit region):
void ctx.addHitRegion(options); void ctx.removeHitRegion(id); void ctx.clearHitRegions();
-
焦点圈:
void ctx.drawFocusIfNeeded(element); void ctx.drawFocusIfNeeded(path, element); void ctx.scrollPathIntoView(); void ctx.scrollPathIntoView(path);
-
Init:
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');
-
Line:
context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); // set line Width context.lineWidth = 15; // set line color context.strokeStyle = '#ff0000'; // set line cap context.lineCap = 'butt'; // ['butt', 'round', 'square'] // set line Join context.lineJoin = 'miter'; // ['miter', 'round', 'bevel'] // rounded corners context.arcTo(rectX, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius); // complete custom shape context.closePath(); context.stroke();
-
Arc:
context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15;
-
Quadratic Curve:
context.quadraticCurveTo(288, 0, 388, 150);
-
Bezier Curve:
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
-
Rectangle:
context.rect(188, 50, 200, 100); context.fillStyle = 'yellow'; context.fill();
-
Circle:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill();
-
Linear Gradient:
// add linear gradient var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height); // light blue grd.addColorStop(0, '#8ED6FF'); // dark blue grd.addColorStop(1, '#004CB3'); context.fillStyle = grd;
-
Radial Gradient:
// create radial gradient var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300); // light blue grd.addColorStop(0, '#8ED6FF'); // dark blue grd.addColorStop(1, '#004CB3'); context.fillStyle = grd;
-
Canvas Pattern:
var pattern = context.createPattern(imageObj, 'repeat'); // ['repeat', 'repeat-x', 'repeat-y', 'no-repeat'] context.rect(0, 0, canvas.width, canvas.height); context.fillStyle = pattern; context.fill();
-
Canvas Image:
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height); // draw cropped image context.drawImage(imageObj, x, y, w, h, destX, destY, destW, destH);
-
Text:
context.font = 'italic 40pt Calibri'; // ['normal', 'italic', 'bold'] context.fillStyle = 'blue'; // textAlign aligns text horizontally relative to placement context.textAlign = 'center'; // ['start', 'end', 'left', 'center', 'right'] // textBaseline aligns text vertically relative to font style context.textBaseline = 'middle'; // ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'] context.fillText('Hello World!', 150, 100); // get text metrics var metrics = context.measureText(text); var width = metrics.width; context.strokeText('Hello World!', x, y);
-
Translate Transform:
// translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // scale y component context.scale(1, 0.5); // rotate 45 degrees clockwise context.rotate(Math.PI / 4); // = Custom Transform = // translation matrix: // 1 0 tx // 0 1 ty // 0 0 1 var tx = canvas.width / 2; var ty = canvas.height / 2; // apply custom transform context.transform(1, 0, 0, 1, tx, ty); // = Shear Transform = // shear matrix: // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0.75; // .75 horizontal shear var sy = 0; // no vertical shear // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // apply custom transform context.transform(1, sy, sx, 1, 0, 0); // = Mirror Transform = // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // flip context horizontally context.scale(-1, 1); // save state context.save(); // restore state 3 context.restore();
-
Composites:
// Shadow context.rect(188, 40, 200, 100); context.fillStyle = 'red'; context.shadowColor = '#999'; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); // Global Alpha context.globalAlpha = 0.5; // Clipping Region context.clip(); // Global Composite Operations // set global composite tempContext.globalCompositeOperation = thisOperation; /* ["source-atop", "source-in", "source-out", "source-over", "destination-atop", "destination-in", "destination-out", "destination-over", "lighter", "darker", "xor", "copy"] */
-
Image Data & URLs:
var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight); var data = imageData.data; // iterate over all pixels for(var i = 0, n = data.length; i < n; i += 4) { var red = data[i]; var green = data[i + 1]; var blue = data[i + 2]; var alpha = data[i + 3]; } // overwrite original image context.putImageData(imageData, x, y); // save canvas image as data url (png format by default) var dataURL = canvas.toDataURL();
-
Animation:
// Clear Canvas context.clearRect(0, 0, canvas.width, canvas.height);
-
Mouse Coordinates:
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body data-rsssl=1> <canvas id="myCanvas" width="578" height="200"></canvas> <script> function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; writeMessage(canvas, message); }, false); </script> </body> </html>