Canvas

Canvas，是HTML5時的HTML元素，用來提供動態2D向量圖顯示

• 參照：『維基百科～Canvas_element』
• 參照：『維基百科～Comparison_of_layout_engines_(HTML5_Canvas)』

技術文件

• 4.8.11 The canvas element — HTML 5
• HTML Canvas 2D Context, Level 2 Nightly
• 4.8.11 The canvas element — HTML Standard
• WebKit DOM Programming Topics: Using the Canvas
• HTML5 canvas - the basics - Dev.Opera
• Canvas tutorial - Web developer guide | MDN

應用範例

• Tear-able Cloth - CodePen
• HTML5 Canvas中加载SVG图像
• canvas图像裁剪、压缩、旋转
• fabricjs/fabric.js: Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
• html2canvas - Screenshots with JavaScript
  • 在要截圖的dom元素加上transform: scale(2)這個css 截出來就會清楚很多

FAQ

圖檔縮放顯示出現黑框

• 怎樣消除圖檔上傳後出現黑框線(canvas, css)
• 把圖片上下左右各裁 1px

const image = document.querySelector('.gc-display-display');
image.style.position = 'absolute';
image.style.clip = `rect(1px, ${image.width - 1}px, ${image.height - 1}px, 1px)`;

gc-zoom-container {
    clip-path: inset(0.5% 0.5% 0.5% 0.5%);
}

相關

• d3.js