使用canvas画一条简单的直线

最新推荐文章于 2024-01-01 09:56:54 发布

weixin_34198583

最新推荐文章于 2024-01-01 09:56:54 发布

阅读量631

点赞数

文章标签： python javascript c# ViewUI

原文链接：https://my.oschina.net/u/3759656/blog/2247219

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>直线</title>
	<style>
		/*画布canvas样式设置*/
		canvas{
			border: 1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			/*window.onload = function表示页面加载之后进行以下操作*/
			var canvas = document.getElementById('canvas');
			/* 获取canvas元素 */
			var context = canvas.getContext('2d');
			/* 获取上下文context */
			context.beginPath();
			// 参数：起点坐标
			context.moveTo(0,0)
			// context.quadraticCurveTo(150,10,200,200);
			// context.quadraticCurveTo(230,350,400,400);
			// 参数：控制点的x,y,结束点的x,y
			// context.quadraticCurveTo(300,50,400,400);
			// context.quadraticCurveTo(50,300,400,400);
			// context.bezierCurveTo(200,380,200,20,400,0);
		/*	context.moveTo(0,0);
			// 参数：控制点的x,y,控制点的x,y,结束点x,y
			context.bezierCurveTo(200,10,200,380,400,400);*/

			context.lineTo(100,200);
			// context.lineTo(100,100);
			// context.lineTo(200,0);
			// context.lineTo(0,100);
			// context.closePath();
			// 绘制
			context.stroke();
			// context.fill();
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>

转载于:https://my.oschina.net/u/3759656/blog/2247219