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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 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 CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
js函数排序的实例代码
2013/07/01 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
公务员政审个人鉴定
2014/02/25 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
建材投资建议书
2014/05/16 职场文书
2019广播稿怎么写
2019/04/17 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
原生JS实现飞机大战小游戏
2021/06/09 Javascript
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏