本文摘自PHP中文网,作者黄舟,侵删。
以前用canvas画图时,都是直接在canvas标签里直接写上宽高,没有问题,但也没有探究过为什么宽高要直接写在canvas标签里,因为各个资料的例子上都是这么写的。今天王sir提出了一个问题:如果把宽高写在<style>里,看看会有什么不同。自己试了以下,果然有问题。先看一下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!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>里的效果:
2、删除<canvas>里的宽高,宽:400;高:300;写在<style>里的效果:
为什么两者的效果会不一样呢?
canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果。所以,在canvas绘图时,应该在canvas标签里直接定义宽高。
以上就是HTML5 canvas画布的宽高为什么写在<canvas>标签里的详细介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5 indexeddb本地储存
HTML5的表单中关于所有type类型的详细介绍
canvas如何设置阴影?canvas设置阴影的方法
HTML5数据推送sse原理及应用开发的图文详解
input实现文字超出省略号(代码示例)
HTML5中如何使用rel属性的预加载功能?
HTML5的学习路线分析
HTML5中返回当前音频/视频的url的属性currentsrc
htm5新增的表单元素keygen标签的用法和属性介绍
h5移动端各种各样的列表的制作方法(七最终章)
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5 canvas画布的宽高为什么写在<canvas>标签里的详细介绍