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

时间：2016-08-14 16:14:42 阅读：184 评论：0 收藏：0 [点我收藏+]

标签：

	<!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" onclick="lujing1()"/>

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

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

	<input type="button" value="绘制变化的坐标" onclick="bianhua()"/>
	<input type="button" value="绘制缩放效果" onclick="bianhua2()"/>
	<input type="button" value="绘制旋转效果" onclick="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>

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

标签：

原文地址：http://www.cnblogs.com/135wxp/p/5770183.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

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