什么是 canvas ？
- canvas 是 HTML5 新增的元素，可通过使用 JavaScript 中的脚本来绘制图形；
- 可以使用 canvas 标签来定义一个 canvas 元素；
- 使用 canvas 标签时，建议要成对出现，不要使用闭合的形式；
- canvas 元素具有默认高宽，
width：300px，height：150px；
替换内容
某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）不支持 HTML 元素 canvas，要给用户展示些替代内容，这非常简单：只需要在 canvas 标签中提供替换内容就可以；
支持 canvas 的浏览器将会忽略在容器中包含的内容，并且只是正常渲染 canvas ，不支持 canvas 的浏览器会显示代替内容；
canvas 标签的两个属性
canvas 标签只有两个属性 width 和 height，当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素、高度为 150 像素；
注意：
- html 属性：设置 width、height 时只影响画布本身不影响画布内容;
- css 属性：设置 width、height 时不但会影响画布本身的高宽，还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）；
渲染上下文
canvas 元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，需要找到它的渲染上下文；
canvas 元素有一个叫做 getContext() 的方法，是用来获得渲染上下文和它的绘画功能，getContext() 只有一个参数，上下文的格式；
使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊
模糊的原因
-
因为 canvas 不像 svg 这样，canvas 不是矢量图，而是像常见图片一样是位图模式的：
- 高 dpi 显示设备意味着每平方英寸有更多的像素；
- 也就是说二倍屏，浏览器就会以 2 个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了 2 倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊；
-
因此，要做 Retina 屏适配，关键是知道当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas 压缩到一倍来展示（css 中的宽高会将 canvas 中的内容根据比例放大）；
示例代码
HTML
JavaScript
<canvas id="canvas" width="400" height="150">您的浏览器当前不支持 canvas</canvas>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const getPixelRatio = (context) => {
return window.devicePixelRatio || 1;
}
// 1.获取屏幕像素比
const ratio = getPixelRatio();
const oldWidth = canvas.width;
const oldHeight = canvas.height;
// 2.将 canvas 放大到该设备像素比来绘制
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
// 3.然后将 canvas 的内容压缩到一倍来展示
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
// 4.设置 canvas图像 x，y 轴的缩放比例
ctx.scale(ratio, ratio);
ctx.fillStyle = "grey";
ctx.font = "40px sans-serif";
ctx.fillText("像素清晰度对比", 70, 100);
效果展示
打赏作者
您的打赏是我前进的动力
微信
支付宝
🏷 其他新增标签
上一篇
评论
