HTML5中canvas知识点详解4-绘制变形图形

最新推荐文章于 2024-08-23 14:03:47 发布

chenzhong5173

最新推荐文章于 2024-08-23 14:03:47 发布

阅读量151

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/dreamchenming/blog/675733

版权

一.变换的三种方式

1.平移:translate(25,25);

2.扩大缩小:scale(0.9,0.9);//注意:在一个循环的操作中，倍数是可以累加的，还有border也是可以放大缩小的。

3.旋转:rotate(Math.PI/10);

二.实例操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绘制变形图形</title>
<script>
window.onload = function(){
	var oC = document.getElementById('can');
	var oCt = oC.getContext('2d');
	oCt.fillStyle = '#c0c0c0';
	oCt.fillRect(0,0,500,500);
	oCt.fillStyle = 'rgba(255,0,0,0.25)';
	//图形的绘制
	//translate(x,y)原点(0,0);x轴向右平移200，y轴向下平移50.
	oCt.fillStyle = 'rgba(255,0,0,0.25)';
	oCt.translate(200,100);
	for(var i = 0;i < 50;i++){
	     //画填充的直方形
		oCt.fillRect(0,0,100,50);
		//x向右平移25，y向下平移25
		oCt.translate(25,25);
		//scale(x,y)整体画布所画图案x，y比例分别缩小0.9倍
		oCt.scale(0.9,0.9);
		//rotate(n*Math.PI/180)画布所画的图案旋转度数为18度。
		oCt.rotate(Math.PI/10);
	}
};
</script>
</head>

<body>
<canvas id='can' width="500px" height="500px"></canvas>
</body>
</html>

转载于:https://my.oschina.net/dreamchenming/blog/675733

chenzhong5173

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中canvas知识点详解4-绘制变形图形

一.变换的三种方式 1.平移:translate(25,25); 2.扩大缩小:scale(0.9,0.9);//注意:在一个循环的操作中，倍数是可以累加的，还有border也是可以放大缩小的。 3.旋转:rotate(Math.PI/10); 二.实例操作 <!DOCTY...
复制链接

扫一扫