足球游戏_中国足彩网¥体育资讯$

canvas需要在标签里直接定义宽高
来源:易贤网 阅读:587 次 日期:2014-12-26 14:10:26
温馨提示:易贤网小编为您整理了“canvas需要在标签里直接定义宽高”,方便广大网友查阅!

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

先看一下代码:

代码如下:

<!doctype html>

<html>

<head>

<meta charset=utf-8>

<title>canvas</title>

<meta name=keywords content=>

<meta name=author>

<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>里的效果:

名单1

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

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

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网页制作
易贤网手机网站地址:canvas需要在标签里直接定义宽高
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标