canvas

基础知识

• 每个canvas默认的宽是300，高是150
• canvas标签上的width和height与csswidth和height是两个不同的属性
• 直接在 html 标签中设置 width 和 height 属性或者使用 JavaScript 来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。
• 使用CSS控制的是canvas的外部尺寸，不能影响内部

基本属性

属性名	说明	默认值
height	高	150
widht	宽	300
moz-opaque	透明度	是否半透明

高宽问题

canvas的标签存在两种宽和高的属性：

直接设置在标签上的高宽，它们是画布的实际大小

<canvas id='canvas' width="number" height="number"></canvas>

通过CSS设置的高宽，这个是指定它在浏览器上的显示像素，配合transform: scale()设置比例，可以将高清图片显示在较小尺寸的元素中，保持清晰度

.parentElement {
    overflow: hidden // 隐藏滚动条
}

#canvas {
    width: 'xxxpx';
    height: "xxxpx";
    transform: scale(与画布的比例); // 设置比例后，可以让图片在小尺寸中保持清晰
}

绘制图像

语法：

// 语法1



drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

参数解释：

• sx, sy, sWidth, sHeight - 图片要渲染的内容尺寸
• dx, dy, dWidth, dHeight - 实际要展示出来的尺寸，如果超过width和height，则不会被显示