HTML5Canvas绘图（上）

1.Canvas绘制步骤

在html5页面中添加canvas元素，定义id属性值以便后面调用

<canvas id="myCanvas" width="500" height="200"></canvas>

使用id寻找页面中的canvas元素

var c=document.getElementById("myCanvas");

通过canvas元素的getContext方法来获取其上下文（Context），即创建context对象，以获取允许绘制的2D环境

var context=c.getContext("2d");

使用javascript脚本来进行绘制

context.fillStyle="#ff0000";

context.fillRect(50,25,100,50);

<head>
	<title></title>
	<!--给画布设置一个样式-->
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="#ff0000";
			context.fillRect(50,25,100,50);
			//距离画布左边50，上边25，绘制的图形宽100，高50
		}
	</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200"></canvas> 
</body>

运行结果：

2.绘制直线相关方法及属性

方法：

beginPath()：定义绘制动作的开始
moveTo()：绘制图形的起点位置
lineTo()：绘制图形的重点位置
stroke()：为所画的线赋予颜色，如没有指定，默认为黑色

属性：

lineWidth：直线的宽度
strokeStvle：直线的颜色
直线端点样式：用lineCap属性设定，包括三种样式，分别为butt，round，square

<html>
<title></title>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			//绘制直线
			context.beginPath();
			context.moveTo(50,100);
			context.lineTo(200,100);
			context.lineWidth=10;
			context.strokeStyle="#ff0000";
			context.lineCap="round";
			context.stroke();	
		}
	</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200"></canvas> 
</body>
</html>

3.绘制弧线和曲线

arcTo(x1,y1,x2,y2,radius) ;包含五个参数，（x1,y1）是端点1，（x2,y2）是端点2，radius是绘制的弧线的半径，此方法就是利用第一条线的终点、端点1、端点2组成的夹角，与夹角两边相切并以radius为半径画弧线，详情实例见下面代码。

<html>
<title></title>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			//绘制弧线
			context.beginPath();
			context.moveTo(20,20);//第一条直线的起点
			context.lineTo(100,20);//第一条直线的终点
			//端点1：（150,20）端点2：(150,70)b半径：50；
			context.arcTo(150,20,150,70,50);
			context.lineTo(150,120);//第二条线的终点
			context.stroke();	
		}
	</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200"></canvas> 
</body>

arcTo()：创建介于两个切线之间的弧/曲线
quadraticCurveTo()：绘制二次曲线，每条二次曲线由上下文点、一个控制点和一个终止点来定义

<html>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			//绘制二次贝塞尔曲线
			context.beginPath();
			context.moveTo(200,100);//起始点
			context.quadraticCurveTo(288,0,388,150);
			context.lineWidth=5;
			context.strokeStyle="pink";
			context.stroke();	
		}
	</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200"></canvas> 
</body>
</html>

bezierCurveTo()：绘制贝塞尔曲线，每条贝塞尔曲线由上下文点、两个控制点和一个终止点来确定

HTML5Canvas绘图（上）

1.Canvas绘制步骤

2.绘制直线相关方法及属性

3.绘制弧线和曲线

猜你喜欢