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():绘制贝塞尔曲线,每条贝塞尔曲线由上下文点、两个控制点和一个终止点来确定

 

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页