H5 canvas中width、height和style的宽高区别详解


Posted in HTML / CSS onNovember 02, 2018

前言

最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧

Canvas 的width height属性

1、当使用width height属性时,显示正常不会被拉伸;如下

<canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器!</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("mycanvas"),
        ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
</script>

运行效果如下,为对角线

H5 canvas中width、height和style的宽高区别详解 

2、使用style时图像会被拉伸(变形),

<style>
         
        #mycanvas {
            width: 150px;
            height: 150px;
        }
    </style>

运行效果

H5 canvas中width、height和style的宽高区别详解 

如何理解???可以这么理解————

Canvas 是一个画板和一张画纸,画板相当于一个容器,画图/作业是在画纸上进行的,

画板和画纸的默认宽高是300*150,当画纸与画板宽高相等时,图像不会被拉伸,当画纸与画板宽高不一样时,图像就会被拉伸(变形)。

1, width 和 height 属性是设定画板和画纸的宽高,

如: width=”300” height=”300” 即画板的宽高是300*300,画纸的宽高也是300*300,作业的300*300 的对角线图像就不会被拉伸

 H5 canvas中width、height和style的宽高区别详解

2, style样式 里设定的是仅画板的宽高,画纸的宽高还是为默认值300*150,

(以上图为例)因此所作业的300*300的对角线图像仅有一部分画在画纸上,如下:

H5 canvas中width、height和style的宽高区别详解 

Btw 画纸不会让画板就这么空出一片,于是画纸连同图像就要一起拉伸到跟画板大小一样。在此例子当中,画纸宽与画板宽都为30,而高为画板的一半,因此只需将高拉伸一倍即可,so 图像也一起被拉伸变瘦,X方向不变,Y方向增至一倍, 所以就得到了变形之后的图片

引用 //3water.com/html5/643939.html 的一段总结

关于HTML5中Canvas的宽、高设置问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸):
方法一:
       <canvas width="500" height="500"></canvas>
方法二:使用HTML5 Canvas API操作 OK
       var canvas = document.getElementById('欲操作canvas的id');
       canvas.width = 500;
       canvas.width = 500;
若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:
方法一:使用CSS 会被拉伸
     #欲操作canvas的id{
          width:1000px;
          height:1000px;
     }
方法二:使用HTML5 Canvas API操作 会被拉伸
      var canvas = document.getElementById('欲操作canvas的id');
      canvas.style.width = "1000px";
      canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);会被拉伸
其它:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 #HTML / CSS
canvas像素画板的实现代码
Nov 21 #HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 #HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 #HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 #HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 #HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 #HTML / CSS
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php采集速度探究总结(原创)
2008/04/18 PHP
PHP 简单日历实现代码
2009/10/28 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
document.write的几点使用心得
2014/05/14 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python-str,list,set间的转换实例
2018/06/27 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Python 列表反转显示的四种方法
2020/11/16 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
招标承诺书
2014/08/30 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
离婚协议书范文2015
2015/01/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python