浅析canvas元素的html尺寸和css尺寸对元素视觉的影响


Posted in HTML / CSS onJuly 22, 2019

遇到的问题:canvas元素变形失真的原因

一个DOM元素存在三种尺寸:style尺寸,html尺寸,css尺寸。

使用canvas元素时,canvas元素默认宽高是300px * 150px。这里的默认尺寸是html尺寸。

为了更好地帮助理解,以作画为例。画板是css尺寸或者style尺寸,画布是html尺寸。

如果我们没有显示指定canvas元素的html尺寸,而在css文件中指定了它的css尺寸。结果是十分令人困惑。

例如我们在一个默认300px * 150px的画布上画了一个圆半径为50px的圆。

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸</title>
    <style>
        #canvas {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>
    <canvas id="canvas"></canvas>
</div>
<script>
    window.onload = function () {
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = "#aaaaaa";
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
    };
</script>
</body>
</html>

最后显示的结果如下:

浅析canvas元素的html尺寸和css尺寸对元素视觉的影响

可以看出画布的尺寸确实是200 * 200。但是圆已经变成了椭圆,图形发生了形变。这是为什么呢?

如果移除css设定的尺寸又会怎么样呢?

浅析canvas元素的html尺寸和css尺寸对元素视觉的影响

可以看出此时图形是正常的。画布的尺寸确实是默认的300 * 150。

从对比以及想象中我们可以得出结论:

起初我们是在300 150的画布上绘制一个圆。绘制完成之后,我们又希望将画布的尺寸变成200 200,同时画布还是那块画布,不作更换。

可行的方法是将画布经行拉伸。假设画布存在弹性,那么一块画布从300 150拉伸成200 200。画布上的圆的长半轴变成原来的1.33倍,短半轴变成0.68倍。此时圆自然就是椭圆了。

结论:

在使用canvas画图的时候,为了避免不必要的麻烦,一定记得为canvas元素设定html尺寸的宽高。

总结

以上所述是小编给大家介绍的浅析canvas元素的html尺寸和css尺寸对元素视觉的影响,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 #HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 #HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 #HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 #HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 #HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 #HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 #HTML / CSS
You might like
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
js实现继承的5种方式
2015/12/01 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
构建高效课堂实施方案
2014/03/13 职场文书
委托公证书范本
2014/04/03 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
美国留学经济担保书
2014/05/20 职场文书
2014年督导工作总结
2014/11/19 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
八月一日观后感
2015/06/10 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python