画布知识点 三角形 直线 矩形

画布：

Canvas俗称画布，以标签<canvas></canvas>写在html代码中，在浏览器中默认大小 300像素 * 150像素（宽 * 高，像素的单位是px）；且画布的标签属性只有width 和 height。

添加颜色：
fillStyle = co

lor; 设置图形的填充颜色
strokeStyle = color; 设置图形轮廓的颜色
globalAlpha = transparencyValue; 设置图形的透明度，有效值范围0–1

例：

代码示例：

如：
    // 插入画布
 

    <template>
        <div>
            <canvas width="500px" height="300px" id="canvas"></canvas>
        </div>
    </template>
     // 获取画布
     <script>
         var canvas = document.getElementById('canvas');
        // getContext(),这个方法是用来获得渲染上下文和它的绘画功能
        var ctx = canvas.getContext('2d');
     </script>

         
    注：
    为其设置css样式就会在浏览器中看到
    </canvas>标签不可省，如果结束标签不存在，则文档的其余部分
    会被认为是替代内容，将不会显示出来    
 

画布案例   三角形   

    <canvas id="canvas" width="500px" height="500px" ></canvas>
    id对应下面的getElementByld

    
  

  <script type="text/javascript">
     	var canvas=document.getElementById("canvas");
		var context=canvas.getContext("2d");
		context.beginPath();
		context.moveTo(0,0);
		context.lineTo(0,100);
		context.lineTo(100,100);
		context.lineTo(0,0);
		context.lineWidth=5;
		context.strokeStyle="black";
		context.stroke();
		context.fillStyle="red";
		context.fill();
     </script>

实例：

         context.strokeStyle="black";     //描边样式
            context.stroke();              //描边
            context.fillStyle="red";     //填充样式
            context.fill();          /

<script type="text/javascript">
	  	var canvas=document.getElementById("canvas");
			var context=canvas.getContext("2d");
			context.beginPath();
			context.moveTo(0,0);
			context.lineTo(0,100);
			context.lineTo(100,100);
			context.lineTo(0,0);
			context.lineWidth=5;
			context.strokeStyle="black";     //描边样式
			context.stroke();              //描边
			context.fillStyle="red";     //填充样式
			context.fill();          //填充
	  </script>

实例：

画图形的时候最后一个点可以用起始坐标也可以用context.closePath（）;闭合

context.lineWidth=10;//设置线的粗细

画矩形填充图       可以抠图  案例

 <script type="text/javascript">
             //1. 获取一个画布（要创建一个画布对象）
             var canvas=document.getElementById("canvas");
             //2. 创建一个画布上下文对象
             var context=canvas.getContext("2d");
           //调用一个画矩形的而函数fillRect(x,y,with,height)
           // context.strokeStyle="red";
           // context.strokeRect(0,0,200,100);
           context.fillStyle="red";       填充
           context.fillRect(0,0,200,100);     大矩形  
            context.clearRect(10,10,20,20);    抠图   小矩形
           
         </script>

注解：x 和 y 表示坐标，width 和 height 表示图形的宽高

    fillRect(x, y, width, height)  绘制一个填充的矩形
    strokeRect(x, y, width, height) 绘制一个矩形边框
    clearRect(x, y, width, height) 清除指定矩形区域
    例：
        ctx.fillRect(25, 25, 100, 100);
 

实例：

虚线案例

<script type="text/javascript">
	        //1. 获取一个画布（要创建一个画布对象）
	        var canvas=document.getElementById("canvas");
	        //2. 创建一个画布上下文对象
	        var context=canvas.getContext("2d");

              for(var i=0;i<100;i++){
				   context.beginPath();
				   context.moveTo(10*i,0);
				   context.lineTo(10*i+5,0);
				   context.closePath();
				   //设置样式
				   context.lineWidth=5;
				   //描边
				   context.stroke();
			   }
			   
			   
	    </script>
	

效果图

 圆形案例1

getContext() 方法返回一个用于在画布上绘图的环境。当前唯一的合法值是 "2d"，该对象导出一个二维绘图 API

fillStyle用来设置或返回用于填充绘画的颜色、渐变或模式

beginPath() 方法开始一条路径，或重置当前的路径。

closePath() 方法创建从当前点到开始点的路径。

fill() 方法填充当前的图像（路径）。默认颜色是黑色。

arc() 方法创建弧/曲线（用于创建圆或部分圆）  前两个参数是中心点坐标，第三个参数是半径，第四个参数是起始角，第五个参数是结束角，最后一个参数可不填，true为逆时针，false为顺时针。

 

<script type="text/javascript">
	           //1. 获取一个画布（要创建一个画布对象）
	           var canvas=document.getElementById("canvas");
	           //2. 创建一个画布上下文对象
	           var context=canvas.getContext("2d");
			   
			   //画圆形
			 //    context.beginPath();
				// context.arc(100,100,50,0,Math.PI*2,true);
				// context.stroke();
				
				
				
				
					
					  
				  </script>

效果图

案例2

 <script type="text/javascript">
	           //1. 获取一个画布（要创建一个画布对象）
	           var canvas=document.getElementById("canvas");
	           //2. 创建一个画布上下文对象
	           var context=canvas.getContext("2d");
			   
			
				
				
			    context.beginPath();
				context.arc(100,100,50,	Math.PI*0.5,Math.PI*1.5,false);
				context.stroke();
				
				context.beginPath();
				context.arc(100,200,50,	Math.PI*1.5,Math.PI*0.5,false);
				 context.stroke();
				
					
					  
				  </script>

效果图