Canvas中设置width与height的问题浅析


Posted in HTML / CSS onNovember 01, 2018

最近因为工作需要,所以就学了一下Html中的Canvas标签。

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。

没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了。看下面代码:

<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;">
</canvas>
<script>
    var oC = document.getElementById('canvas1');
    var ctx = oC.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
</script>
</body>
</html>

上面代码的意思,是要在一个width和height各为200px的canvas上画一条直线,该直线的起点为(0,0),终点为(200,200);

然而浏览器画出来的图像却是:

Canvas中设置width与height的问题浅析

一看这图~怎么是这样的斜度?不应该啊~本应该是一个对角线才对啊~~

后来差了一下资料才知道,canvas标签设置width和height的时候,有以下几种方式和产生的后果:

Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:
方法一:
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方法二:使用HTML5 Canvas API操作
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.width = 500;
3 canvas.width = 500;

若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:
方法一:使用CSS 会被拉伸
1 #欲操作canvas的id{
2     width:1000px;
3     height:1000px;
4 }

也包含了行间样式中的 style="" 。也就是上面的例子,也会产生拉伸的情况。
方法二:使用HTML5 Canvas API操作 会被拉伸
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);会被拉伸

其它:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

 所以,通过上面的资料便可知道其原因就是我上面例子中代码会让canvas的宽高被拉伸了,从而使得图像跟预想的不一致的。

现在我重写了一份正确设置canvas宽高大小的代码例子:

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(0, 0);
    cxt.lineTo(200, 200);
    cxt.stroke();
</script>
</body>
</html>

结果:

Canvas中设置width与height的问题浅析

结束。

总结

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

HTML / CSS 相关文章推荐
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 #HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 #HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 #HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 #HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 #HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 #HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 #HTML / CSS
You might like
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python多线程抽象编程模型详解
2019/03/20 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
网上卖盒饭创业计划书
2014/01/26 职场文书
优良学风班总结材料
2014/02/08 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
超市促销活动方案
2014/03/05 职场文书
竞聘书模板
2014/03/31 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
感恩的心主题班会
2015/08/12 职场文书
2016年少先队活动总结
2016/04/06 职场文书