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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 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
PHP 实现判断用户是否手机访问
2015/01/21 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
详解python之协程gevent模块
2018/06/14 Python
Python线程同步的实现代码
2018/10/03 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
校运会口号
2014/06/18 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
同学聚会通知书
2015/04/20 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers