1.anvasԴ?码图?ͼ

anvasԴ??ͼ

       uniapp中canvas不能连续绘制

       能。在应用《uniapp》使用方法中了解到该应用上的码图asp socket源码canvas是能连续绘制的,需要使用工具进行,该应用是一个使用vue的语法+微信小程序的标签和API的跨平台前端框架。

       1.需要先在view中增加一个canvas

       2.这里的码图网站源码命令两个参数只需要关注第一个path就行了,为相册选择的地址或者拍照得到的地址

       3._this的声明

       4.效果图

       <template>

       <view>

       <button@tap="add">增加</button>

       <viewclass="file"v-if=">0"v-for="(filepath,码图machoview 源码分析index)infilesArray":key="index">

       <image:src=filepath[0]mode="scaleToFill"v-on:click="preview(filepath)">{ { filepath}}</image>

       <viewclass="del"@tap="deleleImg(index)">x</view>

       </view>

       <viewstyle="position:absolute;top:-px;">

       <canvas:style="{ width:w,height:h}"_anvas-id="firstCanvas"id="firstCanvas"></canvas>

       </view>

       </view>

       </template>

       <style>

       </style>

       <script>

       exportdefault{

       data(){

       return{

       w:'px',

       h:'px',

       filesArray:[]

       }

       },

       methods:{

       preview(filepath){

       (filepath)

       ({

       urls:filepath,

       current:0

       })

       },

       add(){

       ({

       count:1,

       sizeType:['original',"compressed"],

       sourceType:['album','camera'],

       success:(res=>{

       letarray=[];

       ({

       src:[0],

       success:function(image){

       /*读取成功进行cavens绘图*/

       this.w=+'px'

       this.h=+'px'

       constctx=('firstCanvas')

       ([0],0,0,,)

       ()

       ('#FFFFFF')

       (newDate(),,)

       (false,()=>{

       ({

       x:0,

       y:0,

       width:,

       height:,

       destWidth:,

       destHeight:,

       canvasId:'firstCanvas',

       success:function(res){

       ({

       filePath:,

       success:function(){

       ({

       title:'标题',

       duration:

       });

       }

       });

       ()

       }

       })

       })

       }

       });

       (array)

       })

       })

       },

       deleleImg(index){

       ({

       title:'提示',

       content:"确定要删除此项吗?",

       success:res=>{

       if(){

       (index,1);

       }

       }

       })

       },

       upload(){

       }

       }

       }

       </script>