Skip to content

Commit

Permalink
canvas
Browse files Browse the repository at this point in the history
  • Loading branch information
wangsuyan committed Oct 31, 2021
1 parent 483f96e commit 98036b5
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 117 deletions.
212 changes: 95 additions & 117 deletions learn-canvas/18-memory-limit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,83 +12,100 @@ const run = function() {
const canvasCount = 2000;
const canvasSelector = 'sycanvas';
const pageSelector = 'sypage';
const isResetWidth = false;
let totalMemoryCost = 0;
let scrolled = false;
let lastRenderedPageIndexs: number[] = [];
const datas = [];
for (let i = 0; i < canvasCount; i++) {
datas.push({
text: `祖国你好${i + 1}`,
text: `第${i + 1}页，公众号素燕`,
rendered: false
})
}

let intersectionObeserver = new IntersectionObserver(entries => {
entries.forEach((entry: IntersectionObserverEntry) => {
let pageIndex = entry.target.id.split('-')[1];
if (entry.intersectionRatio > 0) {
console.log(`${entry.target.id}-出现了`);
let canvas = entry.target as HTMLCanvasElement;
if (canvas.width === 0) {
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
if (!ctx) {
console.error('ctx is null');
}
else {
ctx.scale(2, 2);
ctx.fillStyle = '#fff';
ctx.font = '60px Times';
ctx.textBaseline = 'top';
for (let i = 0; i < 4; i++) {
ctx.fillText(`${datas[+pageIndex-1].text}`, 0, 60 * i);
}
}
const resetWidth = (entry: IntersectionObserverEntry) => {
let pageIndex = entry.target.id.split('-')[1];
let canvas = entry.target as HTMLCanvasElement;
if (entry.intersectionRatio > 0) {
console.log(`${entry.target.id}-出现了`);
if (canvas.width === 0) {
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
ctx.scale(2, 2);
ctx.fillStyle = '#fff';
ctx.font = '40px Times';
ctx.textBaseline = 'top';
for (let i = 0; i < 1; i++) {
ctx.fillText(`${datas[+pageIndex-1].text}`, 0, 60 * i);
}
}
else {
console.log(`${entry.target.id}-消失了`);
let canvas = entry.target as HTMLCanvasElement;
if (canvas.width > 0) {
canvas.width = 0;
canvas.height = 0;
}
else {
console.log(`${entry.target.id}-消失了`);
canvas.width = 0;
canvas.height = 0;
}
}

const removeCanvasEl = (entry: IntersectionObserverEntry) => {
let pageIndex = entry.target.id.split('-')[1];
if (entry.intersectionRatio > 0) {
console.log(`${entry.target.id}-出现了`);
let pageEl = entry.target as HTMLElement;
let canvasEl = document.getElementById(`${canvasSelector}-${pageIndex}`) as HTMLCanvasElement;
if (!canvasEl) {
canvasEl = document.createElement('canvas') as HTMLCanvasElement;
canvasEl.style.position = 'absolute';
canvasEl.style.left = '0';
canvasEl.style.top = '0';
canvasEl.width = width;
canvasEl.height = height;
canvasEl.style.width = `${width}px`;
canvasEl.style.height = `${height}px`;
canvasEl.id = `${canvasSelector}-${pageIndex}`;
canvasEl.style.border = '2px solid #fff';
pageEl.appendChild(canvasEl);

let ctx = canvasEl.getContext('2d');
if (!ctx) {
console.error('ctx is null');
}
else {
ctx.scale(2, 2);
ctx.fillStyle = '#fff';
ctx.font = '40px Times';
ctx.textBaseline = 'top';
for (let i = 0; i < 1; i++) {
ctx.fillText(`${datas[+pageIndex-1].text}`, 0, 60 * i);
}
}
}
});
}, {
threshold: [0, 0.5, 1]
});
}
else {
console.log(`${entry.target.id}-消失了`);

const clear = () => {
// clearn memory
let removeCount = 20;
for(let j = 0; j < removeCount; j++) {
let renderedCanvas = document.getElementById(`${canvasSelector}-${j}`) as HTMLCanvasElement;
console.log(renderedCanvas);
if (renderedCanvas) {
renderedCanvas.parentNode.removeChild(renderedCanvas);
let canvasEl = document.getElementById(`${canvasSelector}-${pageIndex}`);
if (canvasEl) {
let parentEl = canvasEl.parentElement;
parentEl.removeChild(canvasEl);
}
}
let removeCanvas = document.getElementById(`${canvasSelector}-${removeCount + 2}`) as HTMLCanvasElement;
if (removeCanvas) {
let ctx = removeCanvas.getContext('2d');
console.log('after remove', ctx);
}
}

const clearCanvas = (canvasEl) => {
setTimeout(() => {
// 修改了宽度已经渲染的内容会被清除
canvasEl.width = 300;
canvasEl.height = 300;
let ctx2 = canvasEl.getContext('2d');
let imageData = ctx2.getImageData(0, 0, width, height);
console.log('get image data2 = ', imageData);
}, 1000);
}
let intersectionObeserver = new IntersectionObserver(entries => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (isResetWidth) {
resetWidth(entry);
}
else {
removeCanvasEl(entry);
}
});
}, {
threshold: [0]
});

const createCanvas = () => {
const createPageCanvas = () => {
for(let i = 0; i < datas.length; i++) {
let pageEl = document.createElement('div');
pageEl.id = `${pageSelector}-${i + 1}`;
Expand Down Expand Up @@ -118,69 +135,30 @@ const run = function() {
}
}

const getViewportPages = () => {
return [1, 2];
};

const renderCurrentPage = (pageIndexs?: number[]) => {
lastRenderedPageIndexs.forEach(pageIndex => {
let canvasEl = document.getElementById(`${canvasSelector}-${pageIndex}`) as HTMLCanvasElement;
canvasEl.width = width;
canvasEl.height = height;
});

let pages = pageIndexs?.length ? pageIndexs : getViewportPages();
pages.forEach(pageIndex => {
let canvasEl = document.getElementById(`${canvasSelector}-${pageIndex}`) as HTMLCanvasElement;
canvasEl.width = width;
canvasEl.height = height;
let ctx = canvasEl.getContext('2d');
if (!ctx) {
console.error('ctx is null');
}
else {
ctx.scale(2, 2);
ctx.fillStyle = '#fff';
ctx.font = '60px Times';
ctx.fillText(`${datas[pageIndex-1].text}`, 20, 60);
}

// 创建一个 image 元素显示 canvas 的内容，把 canvas 释放
// let imageEl = document.createElement('img') as HTMLImageElement;
// imageEl.width = canvasEl.width;
// imageEl.height = canvasEl.height;
// imageEl.style.position = 'absolute';
// imageEl.style.left = '0';
// imageEl.style.top = '0';
// imageEl.style.width = `${width}px`;
// imageEl.style.height = `${height}px`;
// let pageEl = document.getElementById(`${pageSelector}-${pageIndex}`);
// pageEl.appendChild(imageEl);
const createPage = () => {
for(let i = 0; i < datas.length; i++) {
let pageEl = document.createElement('div');
pageEl.id = `${pageSelector}-${i + 1}`;
pageEl.style.width = `${width}px`;
pageEl.style.height = `${height}px`;
pageEl.style.border = '2px solid green';
pageEl.style.position = 'relative';
pageEl.style.margin = '20px';
parentEl.appendChild(pageEl);

intersectionObeserver.observe(pageEl);

});
lastRenderedPageIndexs = pages;
let memoryCost = width * height * 4;
totalMemoryCost += memoryCost;
}
}

const addScrollEvent = () => {
window.addEventListener('scroll', (e) => {
if (!scrolled) {
scrolled = true;
console.log('scroll', e);
let pageEl = document.getElementById(`${pageSelector}-1`);
let rect = pageEl.getBoundingClientRect();
console.log('rect = ', rect);
}
else {
setTimeout(() => {
scrolled = false;
}, 200);
}
});
if (isResetWidth) {
createPageCanvas();
}
else {
createPage();
}

createCanvas();
// renderCurrentPage();

console.log(`cost total memory ${ totalMemoryCost / 1024 / 1024 } MB`);
};
Expand Down
5 changes: 5 additions & 0 deletions learn-canvas/20-canvas-maxsize.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* @author 素燕（我有个公众号：素燕）
* @description 画布最大限制
*/

(function() {
// safari 画布有最大的宽度限制
console.log('begin draw!!');
Expand Down
26 changes: 26 additions & 0 deletions learn-canvas/21-image-data.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* @author 素燕（我有个公众号：素燕）
* @description data 值
*/

(function() {
// safari 画布有最大的宽度限制
const parentEl = document.getElementById('canvas-wrap');

const canvasEl = document.createElement('canvas');
canvasEl.width = 32;
canvasEl.height = 32;
canvasEl.style.border = '1px solid red';
parentEl.appendChild(canvasEl);

const ctx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
ctx.textBaseline = 'top';
ctx.font = `32px sans-serif`;
ctx.fillStyle = 'rgba(12, 200, 100, 1)';
ctx.fillText('S', 0, 0);
ctx.fillStyle = 'rgba(90, 10, 180, 1)';
ctx.fillText('Y', 0, 0);

let data = ctx.getImageData(0, 0, canvasEl.width, canvasEl.height);
console.log('data = ', data);
}());
1 change: 1 addition & 0 deletions learn-canvas/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
<script src="./18-memory-limit.ts" type="module"></script>
<!-- <script src="./19-filltext-cross-browser.ts" type="module"></script> -->
<!-- <script src="./20-canvas-maxsize.ts" type="module"></script> -->
<!-- <script src="./21-image-data.ts" type="module"></script> -->

</body>
</html>

0 comments on commit 98036b5

Please sign in to comment.