【Html5每日练习】canvas绘制坐标变换图形

最新推荐文章于 2021-01-23 16:15:24 发布

boia

最新推荐文章于 2021-01-23 16:15:24 发布

阅读量2k

点赞数

分类专栏： html5 canvas 文章标签： html5 图形 html

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7460243

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不了变换，今天在网上闲逛的时候看到一个马尾图案，我就试着画了一个，实现的思路应该有两种，但代码却可以有N种，代码如下

<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");

	context.translate(250,100);
	context.fillStyle = "rgba(0,0,255,0.25)";	
	for(var i=0;i<45;i++)
	{
		//context.beginPath();
		context.scale(0.93,0.93);
		context.rotate(Math.PI/9);
		context.translate(35,12);
		context.fillRect(0,0,100,50);
	}

</script>
</html>

在写了这个代码以后，我还发现了一个有趣的现象，哈哈~~~

boia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【Html5每日练习】canvas绘制坐标变换图形

前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不了变换，今天在网上闲逛的时候看到一个马尾图案，我就试着画了一个，实现的思路应该有两种，但代码却可以有N种，代码如下 var myCanvas = document.getElementById("myCa
复制链接

扫一扫