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 相关文章推荐
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php+oracle 分页类
2006/10/09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
Javascript 继承实现例子
2009/08/12 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python脚本处理空格的方法
2016/08/08 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
python实现简单的购物程序代码实例
2020/03/03 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
如何执行一个shell程序
2012/11/23 面试题
敬老院院长事迹材料
2014/05/21 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015年人事科工作总结
2015/04/28 职场文书