找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

TITF出品：微信小程序实用案例代码片段大全《四》

作者：模板之家 2018-1-26 12:14 302人关注

一：使用画布组件绘制一个半径为50px的圆 关键代码 index.wxml 1 canvas style=width:300px; height:100px; canvas-id=canvasArc/canvas 来自CODE的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 11 12 ...

一：使用画布组件绘制一个半径为50px的圆

关键代码

index.wxml

 

 1
 

											

												<canvas style="width:300px; height:100px;" canvas-id="canvasArc"></canvas>

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				snippet_file_0.txt

		

	

	

		 

	

		index.js

	

		 

	

		

			

				

					

						

							
								

									
										
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14

											
									
										

											

											

												Page({

											

												onReady:function(){

											

												// 页面渲染完成

											

												var cxt_arc=wx.createContext();//创建并返回绘图上下文context对象。

											

												cxt_arc.beginPath();//开始一个新的路径

											

												cxt_arc.arc(100,50,50,0,2*Math.PI,true);//设置一个原点(100,50)，半径为为50的圆的路径到当前路径

											

												cxt_arc.stroke();//对当前路径进行描边

											

												cxt_arc.closePath();//关闭当前路径

											

												wx.drawCanvas({

											

												canvasId:'canvasArc',//画布标识，对应<canvas/>的cavas-id

											

												actions:cxt_arc.getActions()//导出context绘制的直线并显示到页面

											

												})

											

												}

											

												})

										

											
								

							
						

					

				

			

		

	





	二：使用画布组件绘制一个会自动缩放的正方体



	

		关键代码

	

		index.wxml

	

		 

	

		

			

				

					

						

							
								

									
										
 1

											
									
										

											

											

												empty

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				snippet_file_0.txt

		

	

	

		 

	

		index.js

	

		 

	

		

			

				

					

						

							
								

									
										
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19

											
									
										

											

											

												Page({

											

												onReady:function(e){

											

												var cxt_scale = wx.createContext();//创建并返回绘图上下文context对象。

											

												var scale=0;//默认缩放倍数为0，大于0为放大，小于0位缩小

											

												setInterval(function(){ //无限循环定时函数

											

												scale+=0.5;// 向缩小后放大

											

												if(scale==10){//但放大位数为10倍时，设置放大倍数为1

											

												scale=1

											

												}

											

												cxt_scale.scale(scale,scale)//对横纵坐标进行缩放

											

												cxt_scale.rect(0,0,10,10)//边长为为10px的正方形

											

												cxt_scale.stroke();//对当前路径进行描边

											

												wx.drawCanvas({

											

												canvasId:'canvasAutoScale',//画布标识，对应<canvas/>的cavas-id

											

												actions:cxt_scale.getActions()//导出context绘制的直线并显示到页面

											

												});

											

												},200)

											

												}

											

												})

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				 

		

	





	三：使用画布组件绘制一条长度为230px的水平直线



	关键代码



	index.wxml



	 



	

		

			

				

					

						
							

								
									
 1

										
								
									

										

										

											empty

									

										
							

						
					

				

			

		

		

			 来自CODE的代码片

		

			snippet_file_0.txt

	





	 



	index.js



	 



	

		

			

				

					

						
							

								
									
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14

										
								
									

										

										

											Page({

										

											onReady:function(e){

										

											var context = wx.createContext();//创建并返回绘图上下文context对象。

										

											context.beginPath();//开始一个新的路径

										

											context.moveTo(30,40);//路径的起点

										

											context.lineTo(260,40);//路径的终点

										

											context.stroke();//对当前路径进行描边

										

											context.closePath();//关闭当前路径

										

											wx.drawCanvas({//

										

											canvasId:'canvasLine',//画布标识，对应<canvas/>的cavas-id

										

											actions:context.getActions()//导出context绘制的直线并显示到页面

										

											});

										

											}

										

											})

									

										
							

						
					

				

			

		

		

			 来自CODE的代码片

		

			 

	





	四：使用画布组件绘制一个长200px，宽100px的长方形



	

		关键代码

	

		index.wxml

	

		 

	

		

			

				

					

						

							
								

									
										
 1

											
									
										

											

											

												<canvas style="width:300px;height:200px;" canvas-id="canvasRect"></canvas>

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				snippet_file_0.txt

		

	

	

		 

	

		index.js

	

		 

	

		

			

				

					

						

							
								

									
										
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14

											
									
										

											

											

												Page({

											

												onReady:function(){

											

												// 页面渲染完成

											

												var ctxt_rect=wx.createContext();//创建并返回绘图上下文context对象。

											

												ctxt_rect.beginPath();//开始一个新的路径

											

												ctxt_rect.rect(10,10,200,100);//添加一个长度为200px、宽度为为100px的矩形路径到当前路径

											

												ctxt_rect.stroke();//对当前路径进行描边

											

												ctxt_rect.closePath();//关闭当前路径

											

												wx.drawCanvas({

											

												canvasId:'canvasRect',//画布标识，对应<canvas/>的cavas-id

											

												actions:ctxt_rect.getActions()//导出context绘制的矩形路径并显示到页面

											

												})

											

												}

											

												})

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				 

		

	





	五：使用画布组件绘制一个会自动旋转的正方体



	

		关键代码

	

		index.wxml

	

		 

	

		

			

				

					

						

							
								

									
										
 1

											
									
										

											

											

												empty

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				snippet_file_0.txt

		

	

	

		 

	

		index.js

	

		 

	

		

			

				

					

						

							
								

									
										
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

											
									
										

											

											

												Page({

											

												onReady:function(e){

											

												var cxt_rotate = wx.createContext();//创建并返回绘图上下文context对象。

											

												var rotate=0;//默认旋转角度为为0

											

												setInterval(function(){ //无限循环定时函数

											

												cxt_rotate.translate(150,100);//设置坐标系坐标

											

												rotate++;//旋转角度自增1

											

												cxt_rotate.rotate(rotate*Math.PI/180)//设置旋转的角度

											

												cxt_rotate.rect(0,0,50,50)//设置坐标(0,0)，相对于坐标系坐标，边长为为50px的正方形

											

												cxt_rotate.stroke();//对当前路径进行描边

											

												wx.drawCanvas({

											

												canvasId:'canvasAutoRotate',//画布标识，对应<canvas/>的cavas-id

											

												actions:cxt_rotate.getActions()//导出context绘制的直线并显示到页面

											

												});

											

												},1)

											

												}

											

												})

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				 

		

	





	六：使用画布组件绘制一个带阴影及下划线的文字



	

		关键代码

	

		index.wxml

	

		 

	

		

			

				

					

						

							
								

									
										
 1

											
									
										

											

											

												empty

										

											
								

							
						

					

				

			

			

				 来自CODE的代码片

			

				snippet_file_0.txt

		

	

	

		 

	

		index.js

	

		 

	

		

			

				

					

						

							
								

									
										
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21

											
									
										

											

											

												Page({

											

												onReady:function(){

											

												// 页面渲染完成

											

												var cxt_fillText = wx.createContext();//创建并返回绘图上下文context对象。

											

												cxt_fillText.beginPath();//开始一个新的路径

											

												cxt_fillText.setFontSize(60);//设置填充文本字体的大小

											

												cxt_fillText.setLineWidth(6);//设置线条的宽度

											

												cxt_fillText.setShadow(0,10,30,'#33ffff');//设置阴影

											

												cxt_fillText.setStrokeStyle('#33ff66');//设置线条的样式

											

												cxt_fillText.setFillStyle('#3300ff');//设置填充的样式

											

												cxt_fillText.fillText("TITF",50,100);//设置填充文本fillText()第一个值为显示的文本，第二个值为文本的x坐标，第三个值为文本的y坐标

											

												cxt_fillText.moveTo(40,105);//设置线条的起始路径坐标

											

												cxt_fillText.lineTo(180,105);//设置线条的终点路径坐标

											

												cxt_fillText.stroke();//对当前路径进行描边

											

												cxt_fillText.closePath();//关闭当前路径

											

												wx.drawCanvas({

											

												canvasId:'canvasFillText',//画布标识，对应<canvas/>的cavas-id

											

												actions:cxt_fillText.getActions()//导出context绘制的直线并显示到页面

											

												})

											

												}

											

												})

										

											
								

							
						

					

				

			

		

	




 		
                

              

               
                            
              
 
               
              
 
            

             
                        
 
              





路过




雷人




握手




鲜花




鸡蛋








 
            


            
 
            

                  原作者: 模板之家 
                  来自: 网络收集 
                   
                   
                              

                        
          

          

  
      
  
  	


上一篇：TITF出品：微信小程序实用案例代码片段大全《五》：ES6新特性专辑 ...
下一篇：TITF出品：微信小程序实用案例代码片段大全《三》

  
        

      

      

    

       
       
      


  	

       
全部回复(0)

            

  
 
    
     
     
    
    
        

      
  




        

    

     










                

           

    

    
    
    

   
    
         

    
     
        

  
 
  
    
    
 
      
 
    

  






 
  
 



 



 

     





    






  

  

    

      
Copyright © Comsenz Inc. Powered by Discuz!X3.5 


 蜀ICP备12013697号 

    

    

       
 微信：xu08290201   QQ：75283535