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不透明度实例讲解
Apr 26 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python实现选择排序
2017/06/04 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
用python对oracle进行简单性能测试
2020/12/05 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
机修工岗位职责
2013/11/24 职场文书
应届大学生求职信
2013/12/01 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
财务会计专业自荐书
2014/06/30 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
北京天坛导游词
2015/02/12 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js