canvas入门（二）标签width与style:width的区别

风舞红枫

已于 2022-02-02 16:08:48 修改

阅读量972

点赞数 3

分类专栏： canvas 文章标签： javascript 前端 html5

于 2019-03-26 22:11:59 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/88831853

版权

canvas 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

canvas入门系列

canvas入门（一）绘制线与正方形
 canvas入门（二）标签width与style:width的区别
 canvas入门（三）绘制代码分块
 canvas入门（四）绘制线的扩展api
canvas入门（五）贝塞尔曲线
 canvas入门（六）旋转、偏移、缩放
 canvas入门（七）中心旋转

相信经过第一节的学习大家都已经成功的画出了一个正方形

大家是否发现宽高被设置在了标签内部的而不是通过css来设置{canvas标签默认宽高300*150}。为什么呢？请看下面例子对比。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<style type="text/css">
		canvas{
			float:left;
            background: #f90;
		}
		.cssStyle{
			width:100px;
			height:300px;
            background: #990;
		}

	</style>
</head>
<body>
	<canvas width="100" height="300"></canvas>
	<canvas class="cssStyle"></canvas>
</body>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementsByTagName('canvas')[0];
	var context = canvas.getContext("2d");
	context.strokeStyle = "#000";
	context.moveTo(60, 60);
	context.lineTo(60, 80);
	context.lineTo(80, 80);
	context.lineTo(80, 60);
	context.lineTo(60, 60);
	context.stroke();

	var canvas1 = document.getElementsByTagName('canvas')[1];
	var context1 = canvas1.getContext("2d");
	context1.strokeStyle = "#000";
	context1.moveTo(60, 60);
	context1.lineTo(60, 80);
	context1.lineTo(80, 80);
	context1.lineTo(80, 60);
	context1.lineTo(60, 60);
	context1.stroke();
}
</script>
</html>

运行结果
在这里插入图片描述
可以很明显的看到通过css设置canvas宽高后绘制的结果明显不符合预期。

那图二又是怎么来的呢，下面的讲解不理解不要紧，只要记住canvas的可绘制内容的宽高是不能用style设置的。
当不设置canvas宽高的时候，canvas默认300150，而css像素又是100300，所以canvas横向1 = 100/300 = 0.33px，纵向1 = 300/150 = 2px。所以绘制时宽 = 20 * 0.33 = 6.6px，高 = 20 * 2 = 40px，从而绘制出一个不符合预期的矩形。
如果看懂了上面的解释，那为了绘制更精细的canvas图形，就可以将canvas可绘制宽高设置为style宽高的比例即可，相当于在固定物理像素内有了更多的逻辑像素。