如何使用canvas在标签里直接定义宽高

本篇文章为大家展示了如何使用canvas在标签里直接定义宽高，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联服务项目包括仁寿网站建设、仁寿网站制作、仁寿网页制作以及仁寿网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，仁寿网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到仁寿省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

先看一下代码：

代码如下:

<!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 ></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标签里直接定义宽高。

上述内容就是如何使用canvas在标签里直接定义宽高，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

网页标题：如何使用canvas在标签里直接定义宽高
网页地址：https://www.cdcxhl.com/article6/jsscig.html

成都网站建设公司_创新互联，为您提供、App设计、企业建站、网站内链、品牌网站建设、软件开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容