HTML5 Canvas绘制线条入门示例2 - DIY：代码在线编辑与演示页面

代码类型:

杂项:

启用CSS/JS语法检查
监测脚本运行错误
禁止库文件重复

文档类型:

JS库文件:

手动添加:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5 Canvas绘制线条入门示例
		</title>
	</head>
	<body>
		
		<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
			您的浏览器不支持canvas标签。
		</canvas>
		<script type="text/javascript">
			//获取Canvas对象(画布)
			var canvas = document.getElementById("myCanvas");
			//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
			if(canvas.getContext){
				//获取对应的CanvasRenderingContext2D对象(画笔)
				var ctx = canvas.getContext("2d");
				//开始一个新的绘制路径
				ctx.beginPath();
				//定义直线的起点坐标为(10,10)
				ctx.moveTo(10, 10);
				//定义直线的终点坐标为(50,10)
				ctx.lineTo(50, 10);
				//沿着坐标点顺序的路径绘制直线
				ctx.stroke();
				//关闭当前的绘制路径
				ctx.closePath();
				//绘制一条带颜色的直线
				ctx.moveTo(10, 30);
				ctx.lineTo(50, 30);
				//支持css颜色值的各种表现形式，例如："blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255,1)"
				//颜色等各种设置，必须在最终的绘制函数stroke()之前调用
				ctx.strokeStyle = "blue";
				ctx.stroke();
				//关闭当前的绘制路径
				ctx.closePath();
			}
		</script>
	</body>
</html>

相关文章:

代码类型:

杂项:

文档类型:

JS库文件:

手动添加: