Canvas coordinates
The origin is in the upper left corner, positive X to the right, positive Y down.
Draw the image to canvas
DrawImage, reference www.w3school.com.cn/html5/canva…
Note that images need to be loaded before they can be drawn to canvas. The following methods are recommended
var bgImg = new Image();
bgImg.src = 'images/background.jpg';
bgImg.onload = function(){
// Images can be drawn after loading
ctx1.drawImage(bgImg,0.0, draw width, draw height); }Copy the codeClipping in canvas
This example is to crop an image to a circle
ctx.save(); // Save the Canvas state before clipping for restoration after clipping
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0.2 * Math.PI); // Draw the clipping path
ctx.clip(); // Set the current path to the clipping path
ctx.drawImage(img, x, y, d, d); // Draw the cropped image
ctx.restore(); // Restore the Canvas state before clipping to finish clipping
Copy the codeDraw text to canvas
ctx.font = `normal normal 11px "sans-serif"`; // Text style
ctx.fillStyle = "#ffffff"; // Text colorCtx.filltext (words, starting point X coordinates, starting point Y coordinates);//
Copy the codeCanvas draws multiple lines of text
Need to handle line breaks, overflow, etc., to give an example:
// Draw N lines of text, the second line starts to fill the canvas width, you can set the left and right padding, the first line can set the starting coordinates. The overflow in the second line ends with an ellipsis.
/ * * * *@param CTX 2D context object *@param Text Draws text *@param X coordinate axis x position *@param Y coordinate y position *@param Options include maxWidth maximum width, lineHeight, row limit, textIndent first line indent, fontSize text size */
function textEllipsis(ctx, text, x, y, options) {
ctx.save();
if (
typeoftext ! = ='string' ||
typeofx ! = ='number' ||
typeofy ! = ='number'
) {
return;
}
let defaultOpt = {
maxWidth: 100.// Output the maximum height of multiple lines
lineHeight: 14./ / line height
row: 1000.// Maximum number of lines
textIndent: 0.// Indent the first line
fontSize: 14.// Font size
};
let params = Object.assign({}, defaultOpt, options);
// Split text
let textArr = text.split(' ');
// The text finally takes the height
let textHeight = 0;
// The text displayed in each line
let textOfLine = ' ';
// Control the number of rows
let limitRow = params.row;
let rowCount = 0;
// A looping array of characters
for (let i = 0; i < textArr.length; i++) {
// Get a single text or character
let singleWord = textArr[i];
// Concatenate text
let connectText = textOfLine + singleWord;
// Calculate whether the next line is the last
let isLimitRow = limitRow ? rowCount === limitRow - 1 : false;
// The last line displays an ellipsis, otherwise the concatenation text
let measureText = isLimitRow ? connectText + '... ' : connectText;
console.log(measureText);
// Set the font and calculate the width to see if the first line is indent
ctx.font = `normal 500 ${params.fontSize}px "sans-serif"`;
let width = ctx.measureText(measureText).width; // Text width
// The first line needs to be indent
let conditionIndent = params.textIndent && rowCount === 0; // Determine whether indentation is required
let measureWidth = conditionIndent ? width + params.textIndent : width; // Set the number of lines according to the indentation
// If the width is larger than the limit and the number of drawn lines is not the last line, write text
// If the width is greater than the limit, it can be drawn
if (measureWidth > params.maxWidth && i > 0&& rowCount ! == limitRow) {// If it is the last line, the computed text is displayed
measureText = measureText.slice(0, -4) + '... '; // Delete the last character
let canvasText = isLimitRow ? measureText : textOfLine;
let xPos = conditionIndent ? x + params.textIndent : x; // Line header X coordinates
/ / write words
ctx.fillStyle = '# 000';
console.log(666666666666);
ctx.fillText(canvasText, xPos, y);
// Next line of text
textOfLine = singleWord;
// Record the position of the line
y += params.lineHeight;
// Calculate the height of the text
textHeight += params.lineHeight;
rowCount++; // The number of lines after the text is drawn increases by 1
if (isLimitRow) {
// The number of rows reached the limit
break; }}else {
// The width is not greater than the maximumtextOfLine = connectText; }}if(rowCount ! == limitRow) {// Single-line text goes this way
let xPos = params.textIndent && rowCount === 0 ? x + params.textIndent : x;
ctx.fillStyle = '# 000';
console.log('989898989898');
ctx.fillText(textOfLine, xPos, y);
}
// Calculate the total height of the text
let textHeightVal = rowCount < limitRow ? params.lineHeight : textHeight;
ctx.restore();
return textHeightVal;
}
Copy the codeCanvas sets the background color
Draw the border and fill it with the fill method. Here is an example of drawing a rounded rectangle:
// canvasContext, x, y, width, height, radius
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
ctx.save();
ctx.lineWidth = 1;
if (typeof stroke === 'undefined') {
stroke = true;
}
if (typeof radius === 'undefined') {
radius = 5;
}
if (typeof radius === 'number') {
radius = { tl: radius, tr: radius, br: radius, bl: radius };
} else {
var defaultRadius = { tl: 0.tr: 0.br: 0.bl: 0 };
for (var side indefaultRadius) { radius[side] = radius[side] || defaultRadius[side]; }}// Draw the border
ctx.beginPath();
ctx.moveTo(x + radius.tl, y); // The beginning of the first arc
ctx.lineTo(x + width - radius.tr, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr); / / the rounded
ctx.lineTo(x + width, y + height - radius.br);
ctx.quadraticCurveTo(
x + width,
y + height,
x + width - radius.br,
y + height
);
ctx.lineTo(x + radius.bl, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
ctx.lineTo(x, y + radius.tl);
ctx.quadraticCurveTo(x, y, x + radius.tl, y);
ctx.closePath();
if (fill) {
// Fill the background color
ctx.fillStyle = '#F74B57';
ctx.fill();
}
if (stroke) {
// Fill the border color
ctx.strokeStyle = '#F74B57';
ctx.stroke();
}
ctx.restore();
}
Copy the codeSave the Canvas locally
function exportCanvasAsPNG(id, fileName) {
var canvasElement = document.getElementById(id);
var MIME_TYPE = "image/png";
var imgURL = canvasElement.toDataURL(MIME_TYPE);
var blob = dataURLtoBlob(imgURL);
var objURL = URL.createObjectURL(blob);
var link = document.createElement("a");
link.download = fileName + ".png";
link.href = objURL;
link.click();
function dataURLtoBlob(dataurl: string) {
var arr = dataurl.split(', '), mime = arr[0].match(/ : (. *?) ; /) [1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime}); }}Copy the code