canvas的宽高定义问题

最新推荐文章于 2021-06-09 23:13:44 发布

fyddaben

最新推荐文章于 2021-06-09 23:13:44 发布

阅读量888

点赞数

分类专栏： html5 文章标签： Canvas CSS html5

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转载自:http://www.189works.com/article-102274-1.html

canvas宽高问题探究——宽高写在<canvas>标签和<style>样式里进行画图时，效果为什么不一样呢？

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

先看一下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<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.宽高直接写在<canvas>里的效果：

2、删除<canvas>里的宽高，把宽高写在<style>里的效果：

　　为什么两者的效果会不一样呢，在网上通过大神们的讲解，终于明白了。

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

fyddaben

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas的宽高定义问题

转载自:http://www.189works.com/article-102274-1.html canvas宽高问题探究——宽高写在标签和样式里进行画图时，效果为什么不一样呢？以前用canvas画图时，直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王
复制链接

扫一扫