canvas.width和canvas.style.width区别以及应用

付永刚发布于2019-08-23 12:33 / 2180人阅读

摘要：今天讲的内容是和的区别，在没有做项目之前，其实我是并没有深入了解过这两个属性的，最近在研究项目的自适应问题，尤其是在中置入图片，碰到了图片模糊的问题，这些杂症都是和文章要讲的有关系。最后，当我们不指定的真实大小时，默认按照处理。

今天讲的内容是canvas.width和canvas.style.width的区别，在没有做canvas项目之前，其实我是并没有深入了解过这两个属性的，最近在研究canvas项目的自适应问题，尤其是在canvas中置入图片，碰到了图片模糊的问题，这些“杂症”都是和文章要讲的canvas.width/canvas.style.width有关系。

canvas.width/canvas.style.width概览

先看一下这个例子：https://codepen.io/parkeeers/...






// JavaScript
function drawDiagonal(id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(100, 100);
  context.stroke();
}

window.onload = function() {
  drawDiagonal("diagonal1");
  drawDiagonal("diagonal2");
  drawDiagonal("diagonal3");
  drawDiagonal("diagonal4");
}

效果图

我们来看第一个canvas，指定了canvas的大小，并未指定canvas.style的大小，那么画布就是实实在在是100*100大小，我们JS代码中，也是在画一条从（0，0）到（100， 100）的对角线。第一个完全没有问题

第二个canvas，canvas本身以及canvas.style都进行了定义，从定义可以看到canvas.style就是在将我们的画布放大2倍，从图也能看到，这条线指向对角没问题，但是变粗了，这也证明了，canvas先是参考自己的本身画布大小进行绘制，绘制完毕，由style指定的大小，渲染在浏览器页面

第三个canvas，本身的canvas与canvas.style不成比例，html中并没有显示的声明canvas本身的大小，只声明了style的大小，那么这种情况下，canvas画布本身的大小就是默认值300*150；那么我们依托300*150进行绘制，就像第四个纯净的canvas上的线条一样绘制，绘制完毕后，要渲染到页面，这个时候，还是和canvas2那个套路一样，依据style指定的width，height进行缩放，状态就由第四个canvas变成了第三个最后的样子。我们来看一下公式：
默认大小300*150，style指定大小200*200

最后标准位置下的（100，100）就变成了在style下200*200的（66.7， 133.333）

最后一幅图就是当不指定canvas大小时，默认的大小，标准的300*150

总结：举了三个不同但是互相关联的例子，通过这些，我们能了解，canvas本身是一个画布，我们怎么理解画布，决定了我们是否能正确的理解canvas.width和canvas.style.width的区别。canvas.width就是画布真实的大小，这个画布不是我们能看到的画布，我们能看见的画布，已经是在浏览器处理canvas.style.width/canvas.style.height之后，加工处理后的画布。而cavnas.style.width/canvas.style.height决定了画布以怎样的形式进行缩放展示给页面。转换的比例就是上面两个公式。最后，当我们不指定canvas的真实大小时，默认按照300*150处理。

canvas.width / canvas.height 表示画布真实大小，其实我们并不可见

canvas.style.width / canvas.style.height 表示画布输出到浏览器我们可见的/最终的大小

不提供canvas真实大小时，默认按300*150处理，如果canvas.style也没提供，那么style.width为空，注意并不是300*150

canvas图片模糊的问题（待完善）

再讲canvas图片模糊的问题之前，我们可以看一下上面第二个canvas，真实大小与样式指定的大小是呈2倍关系，最后我们的线条也是放大2倍，大家要注意一个概念，canvas绘制是以自己真实大小来定位&绘制的，最后由浏览器渲染到页面可见时，由canvas.style.width/cavnas.style.height决定的

GPU云服务器云服务器轻量应用和云服务器的区别轻量应用服务器和云服务器区别阿里云ecs和轻量应用服务器区别 web服务器和应用服务器的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98734.html

我从 fabric.js 中学到了什么

摘要：前言熟悉的朋友想必都使用或者听说过，算是一个元老级的库了，从第一个版本发布到现在，已经有年时间了。中缓存是默认开启的，同时也可以设置为禁用。处理屏屏幕模糊的问题，直接给出处理方法，就不展开说了。前言熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js，Fabric 算是一个元老级的 canvas 库了，从第一个版本发布到现在，已经有 8 年时间了。我近一年时间也在项目...

oogh 2019-08-23 17:15 评论0 收藏0
使用canvas绘制圆弧动画

摘要：即，把放大为倍时，显示效果会被拉伸当不设置样式宽高时，浏览器中大小由画布大小决定在实际开发中，碰到一个例外，是在使用时，绘制的标签如果只设置画布大小时，在移动端的浏览器上显示异常，正常。回到圆弧动画，当前动画有两段，以顺时针方向这段为例。效果预览 showImg(https://segmentfault.com/img/bVbm7UY?w=502&h=304); canvas 绘制基...

Kyxy 2019-08-23 14:41 评论0 收藏0
实现Google带截图功能的web反馈插件

摘要：谷歌是通过来实现这个组件的，比较复杂谷歌的工具加载文件和截图文件有兴趣的同学可以看一下。高亮区域核心部分截图搞定了，接下来就是高亮区域了。几乎所有的APP应用包括Web应用都需要一个意见反馈，这样才能了解用户对产品的意见和建议，以便于不断提升完善自己的产品。目前的反馈组件一般有两种，一种是打开一个反馈页面填写表单，另一种则是通过弹窗来完成，相比较而言第二种更加方便，而且更加容易组件化...

freecode 2019-08-22 17:20 评论0 收藏0