canvas需要在标签里直接定义宽高


Posted in HTML / CSS onDecember 17, 2014

以前用canvas画图时,都是直接在canvas标签里直接写上宽高,没有问题,但也没有探究过为什么宽高要直接写在canvas标签里,因为各个资料的例子上都是这么写的。今天王sir提出了一个问题:如果把宽高写在<style>里,看看会有什么不同。自己试了以下,果然有问题。

先看一下代码:


复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
canvas{margin:20px;
/*width: 400px;
height: 300px;*/
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,100);
context.lineWidth=5;
context.stroke();
}
</script>
</body>
</html>

1.宽:400;高:300;直接写在<canvas>里的效果:

canvas需要在标签里直接定义宽高

2、删除<canvas>里的宽高,宽:400;高:300;写在<style>里的效果:

canvas需要在标签里直接定义宽高

为什么两者的效果会不一样呢?

canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果。所以,在canvas绘图时,应该在canvas标签里直接定义宽高。

HTML / CSS 相关文章推荐
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 #HTML / CSS
使用canvas绘制超炫时钟
Dec 17 #HTML / CSS
24个canvas基础知识小结
Dec 17 #HTML / CSS
html5使用canvas绘制文字特效
Dec 15 #HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 #HTML / CSS
html5使用canvas绘制一张图片
Dec 15 #HTML / CSS
html5使用canvas画三角形
Dec 15 #HTML / CSS
You might like
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
p5.js入门教程之图片加载
2018/03/20 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
实例介绍Python中整型
2019/02/11 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
wxpython绘制音频效果
2019/11/18 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
数学系毕业生求职信
2014/05/29 职场文书
家具商场的活动方案
2014/08/16 职场文书
学习考察心得体会
2014/09/04 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
深入浅析React中diff算法
2021/05/19 Javascript