关于canvas

小楫轻舟丶

于 2020-10-12 16:58:12 发布

阅读量419

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lioldamon/article/details/109031432

版权

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

canvas的translate不会放大

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<canvas id="a"></canvas>
	
	<script type="text/javascript">
		var cans=document.getElementById('a');
	
		var ctx=cans.getContext('2d');
		cans.width=500;
		cans.height=400;
	
		ctx.save()
		ctx.strokeStyle="#0000ff"
		ctx.translate(100,100)
		ctx.scale(0.5,0.5)
		ctx.strokeRect(-50,-50,100,100);
		ctx.stroke();
		ctx.restore();

		ctx.save()
		ctx.strokeStyle="#0000ff"
		ctx.translate(150,100)
		ctx.scale(0.5,0.5)
		ctx.rotate(20*Math.PI/180);
		ctx.strokeRect(-50,-50,100,100);
		ctx.stroke();
		ctx.restore()



		ctx.save()
		ctx.translate(100,100)
		ctx.rect(-50,-50,100,100);
		ctx.stroke();
		ctx.restore()

		ctx.save()
		ctx.translate(150,100)
		ctx.rect(-50,-50,100,100);
		ctx.stroke();
		ctx.restore()

		


	</script>
</body>
</html>

在这里插入图片描述
canvas的宽高直接设置：不用用样式设置
var canvas=document.getElementById(‘canvas’)
canvas.width=100
cnavs.height=100