绘制线条粗细以及绘制变化的坐标

最新推荐文章于 2021-11-22 08:05:32 发布

weixin_30823001

最新推荐文章于 2021-11-22 08:05:32 发布

阅读量375

点赞数

文章标签： java 人工智能 python

原文链接：http://www.cnblogs.com/135wxp/p/5770183.html

版权

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<canvas id="mycas" width="400" height="400"></canvas>
	<div>
	<input type="button" value="绘制路径1" οnclick="lujing1()"/>

	<input type="button" value="绘制渐变1" οnclick="jianbian1()"/>
	<input type="button" value="绘制渐变2" οnclick="jianbian2()"/>

	<input type="button" value="绘制渐变3" οnclick="jianbian3()"/>
	<input type="button" value="绘制渐变4" οnclick="jianbian4()"/>
	</div>
	<div>
	<input type="button" value="绘制线条粗细1" οnclick="xiantiao()"/>

	<input type="button" value="绘制变化的坐标" οnclick="bianhua()"/>
	<input type="button" value="绘制缩放效果" οnclick="bianhua2()"/>
	<input type="button" value="绘制旋转效果" οnclick="bianhua3()"/>
	</div>
	<script>
	function bianhua3(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.translate(200, 200);

	for(var i=0; i<36; i++){
	g.rotate(10*Math.PI/180);
	g.fillRect(100, 100, 100,100);
	}

	}
	function bianhua2(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.fillRect(20, 20, 50,50);

	g.fillStyle="blue";
	g.translate(50, 10);
	g.scale(2,0.5);
	g.fillRect(20, 20, 50,50);

	g.fillStyle="yellow";
	g.translate(50, 10);
	g.scale(2,2);
	g.fillRect(20, 20, 50,50);


	}
	function bianhua(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.fillRect(20, 20, 50,50);

	g.fillStyle="blue";
	g.translate(100, -10);
	g.fillRect(20, 20, 50,50);

	}
	function xiantiao(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.moveTo(10,10);
	g.lineTo(200, 300);

	g.lineWidth=30;
	g.stroke();

	}
	function jianbian4(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createRadialGradient(100,100, 50, 60,80, 100);
	cg.addColorStop(0, "blue");
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.arc(100, 100, 120, 0, Math.PI*2);

	g.fill();
	}
	function jianbian3(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createRadialGradient(100,100, 50, 100,100, 100);
	cg.addColorStop(0, "blue");
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.arc(100, 100, 120, 0, Math.PI*2);
	// g.stroke();
	g.fill();
	// g.fillRect(0, 0, 300, 300);
	}
	function jianbian2(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createLinearGradient(50,50, 250,250);
	cg.addColorStop(0, "blue");
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.fillRect(30, 30, 300, 300);
	}
	function jianbian1(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createLinearGradient(50,50, 300,50);
	cg.addColorStop(0, "blue");
	cg.addColorStop(0.6, 'gray');
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.fillRect(0, 50, 400, 200);
	}
	function lujing1(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.beginPath();
	g.arc(100,100, 50, Math.PI4/3, Math.PI2/3, false);
	g.lineTo(100, 100);
	g.closePath();
	g.stroke();
	g.fill();

	g.beginPath();
	g.fillStyle='blue';
	g.arc(95,100, 50, Math.PI4/3, Math.PI2/3, true);
	g.lineTo(95, 100);
	g.closePath();
	g.stroke();
	g.fill();
	}
	</script>
	</body>
	</html>