canvas 圆形、文本

た入场券 2021-07-24 21:12 460阅读 0赞

canvas
    	圆形绘制
    	
    	1、bi.arc(圆心x,圆心y,半径r,开始弧度,结束弧度,绘制方向);
    	  bi.arc(圆心x,圆心y,半径r,结束弧度,开始弧度,绘制方向);
    		弧度:格式为(0-2*Math.PI),会自动转换成弧度;  0代表0度,1代表180度
    		绘制方向:false顺时针,true逆时针。
    	
    	2、绘制实心圆
    		bi.fillStyle
    		bi.fill()
    		
    	3、绘制圆环
    		bi.lineWidth				设置圆环宽度
    		bi.strokeStyle				设置圆环颜色
    		bi.setLineDash([10,20,30]);	设置圆环边框样式
    		bi.stoke()					绘制
    		
    文本
    	ctx.font="italic small-caps bold 12px arial";	设置非颜色以外的样式
    	设置文本位置
    		ctx.textAlign="center|end|left|right|start";
    			ctx.textAlign="start";
    			ctx.fillText("textAlign=start",150,60);
    			ctx.textAlign="end";
    			ctx.fillText("textAlign=end",150,80);
    			ctx.textAlign="left";
    			ctx.fillText("textAlign=left",150,100);
    			ctx.textAlign="center";
    			ctx.fillText("textAlign=center",150,120);
    			ctx.textAlign="right";
    			ctx.fillText("textAlign=right",150,140);
    			
    	设置文本水平基准线
    		context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
    			alphabetic	默认,文本基线是普通的字母基线。
    			top			文本基线是方框的顶端。。
    			hanging		文本基线是悬挂基线。
    			middle		文本基线是方框的正中。
    			ideographic	文本基线是表意基线。
    			bottom		文本基线是方框的底端。
    			
    			在y=200以不同的 textBaseline 值放置每个单词
    			ctx.textBaseline="top";
    			ctx.fillText("Top",5,100);
    			ctx.textBaseline="bottom";
    			ctx.fillText("Bottom",50,100);
    			ctx.textBaseline="middle";
    			ctx.fillText("Middle",120,100);
    			ctx.textBaseline="alphabetic";
    			ctx.fillText("Alphabetic",190,100);
    			ctx.textBaseline="hanging";
    			ctx.fillText("Hanging",290,100);
    		
    	绘制带边框的文本
    		ctx.lineWidth=1
    		ctx.strokeStyle='red'
    		ctx.setLineDash([10,5]);		设置边框虚线
    		ctx.strokeText("Hello World",10,50,可选文字最大宽度)
    	绘制实心的文本
    		ctx.fillStyle='red'
    		ctx.fillText("Hello World",10,50,可选文字最大宽度);
    	
    	返回文本宽度
    		ctx.font="30px Arial";
    		let txt="Hello World"
    		console.log(ctx.measureText(txt).width)

圆形示意图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][567a073096c7431e972a9b05e7d94ea7.png]  
![在这里插入图片描述][dde42e531d834c26ac98650895b3a994.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		.canvas{ 
    			border:solid 2px black;
    		}
    	
    	
    	</style>
    </head>
    <body>
    
    	<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
    	<script>
    			var	canvas=document.querySelector(".canvas");
    			var bi=canvas.getContext('2d');
    
    			// bi.beginPath();
    			// bi.strokeStyle='red';
    			// bi.arc(50,50,30,0*Math.PI,0.5*Math.PI,false)
    			// bi.stroke();
    			// bi.closePath();
    
    			bi.beginPath();
    			bi.strokeStyle='pink';
    			bi.moveTo(10,10);
    			bi.lineTo(40,10);
    			bi.lineTo(40,30);
    			bi.lineTo(10,10);
    		    bi.lineWidth=5;
    		    bi.lineCap='round';
    		    bi.lineJoin='bevel';
    		    bi.setLineDash([10,30]);
    			bi.stroke();
    
    			bi.closePath();
    
    
    	</script>
    	
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/f3a816e252f44826a9543355badc8f71.png
[567a073096c7431e972a9b05e7d94ea7.png]: /images/20210724/2dd0076273ef4defb4f2b1680ce4ca57.png
[dde42e531d834c26ac98650895b3a994.png]: /images/20210724/e1ead03c67cb4c048825013d21066ad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/07d621d4f2544e92ab20a2468da6dea8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/072437ce7f58432ea8311f30eef4e3c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]: /images/20210724/f5aaa6410c664931980a6bdb419c440e.png