欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5中通過li-canvas輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字等

  發(fā)布時(shí)間：2018-11-30 16:46:28   作者：佚名   我要評(píng)論
這篇文章主要介紹了HTML5中通過li-canvas輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字等,需要的朋友可以參考下

Html5新增的canvas是個(gè)強(qiáng)大的功能， 估計(jì)大家平時(shí)都會(huì)用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會(huì)很亂，所以對(duì)canvas常用的畫圖、繪制文字、保存功能進(jìn)行了封裝，目前還比較滿意，能夠快速完成canvas繪圖任務(wù)，從容應(yīng)對(duì)需求變更，只需進(jìn)行簡(jiǎn)單配置即可。

li-canvas.js

對(duì)Html5的canvas功能進(jìn)行了封裝，方便進(jìn)行單圖、多圖繪制、圓角圖片繪制、多行文字繪制、自動(dòng)換行、圖片保存下載等功能.

github地址： github.com/501351981/l…

主要功能

•圖片繪制：?jiǎn)螆D/多圖繪制、圓角圖片繪制. •文字繪制：多段文字繪制、自動(dòng)換行. •圖片保存：獲取圖片數(shù)據(jù)、下載圖片到本地，支持自定義下載圖片名.

npm安裝

# npm 安裝
npm install --save li-canvas

直接引用

在html中直接引入js文件.

<script src="dist/li-canvas.js"></script>

如何使用

實(shí)例化

使用li-canvas時(shí)需要先實(shí)例化對(duì)象，new LiCanvas(canvas_id,options),傳入canvas的id，options選填，可以設(shè)置canvas背景和默認(rèn)文字樣式等  

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180"></canvas>
<script> var canvas=new LiCanvas('test') </script>
</body>
    ...

圖片繪制

•繪制單張圖片

調(diào)用addDrawImageTask(image)，其中參數(shù)image是一個(gè)對(duì)象，包括

src：圖片的url地址

x：圖片在canvas畫布上的左上角x坐標(biāo)

y：圖片在canvas畫布上的左上角y坐標(biāo)

width：圖片繪制寬度

height：圖片繪制高度

borderRadius：圖片圓角半徑

調(diào)用addDrawImageTask(image)時(shí)，并沒有立即繪制圖片，而是添加了一個(gè)繪圖任務(wù)，只有調(diào)用draw(callback)時(shí)，才執(zhí)行繪圖任務(wù)，執(zhí)行完成調(diào)用callback回調(diào)函數(shù)

為什么這么做呢？因?yàn)閳D片繪制的時(shí)候需要先下載圖片，這是個(gè)異步操作，所以先添加到任務(wù)列表，調(diào)用draw()的時(shí)候再按照任務(wù)添加順序依次執(zhí)行  

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>
<img src="./bg.jpg" id="img" width="0" height="0">
<script> var bg={
        src:document.getElementById('img').src,//或者圖片的url地址
        x:0,//左上角的x坐標(biāo)
        y:0,//左上角的y坐標(biāo)
        width:1563,//圖片繪制寬度
        height:1180,//圖片繪制高度
        borderRadius:0 //圖片圓角半徑
    }

    var canvas=new LiCanvas('test')

    canvas.addDrawImageTask(bg)  //添加繪圖任務(wù)，并沒有立即進(jìn)行繪圖

    canvas.draw(()=>{
       console.log("繪制完成")
    }) </script>
</body>
    ...

•繪制多圖

可以連續(xù)多次調(diào)用addDrawImageTask(image)，也可以傳圖一個(gè)數(shù)組  

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var img1={
        src:"http://*****.com/***.png",
        x:0,
        y:0,
        width:1563,
        height:1180,
        borderRadius:0
    }

    var img2={
            src:"http://*****.com/***.png",
            x:0,
            y:0,
            width:1563,
            height:1180,
            borderRadius:0
     }

    var imgs=[
        {
             src:"http://*****.com/***.png",
             x:0,
             y:0,
             width:100,
             height:100,
             borderRadius:0
        },
        {
             src:"http://*****.com/***.png",
             x:0,
             y:0,
             width:100,
             height:100,
             borderRadius:0
        }
    ]

    var canvas=new LiCanvas('test')

    canvas.addDrawImageTask(img1)
    canvas.addDrawImageTask(img2)   //多次調(diào)用實(shí)現(xiàn)多圖繪制

    canvas.addDrawImageTask(imgs)   //直接傳入一個(gè)數(shù)組也可以實(shí)現(xiàn)多圖繪制

    canvas.draw(()=>{
       console.log("繪制完成")
    }) </script>
</body>
    ...

•繪制圓角或圓形圖片

只需要設(shè)置borderRadius即可  

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var img1={
        src:"http://*****.com/***.png",
        x:0,
        y:0,
        width:100,
        height:100,
        borderRadius:50  //設(shè)置圓角半徑，當(dāng)圓角半徑為正方形邊長(zhǎng)一半時(shí)，就是一個(gè)圓形了
    }

    var canvas=new LiCanvas('test')
    canvas.addDrawImageTask(img1)
    canvas.draw(()=>{
       console.log("繪制完成")
    }) </script>
</body>
    ...

繪制文字

•繪制一段文字

調(diào)用addDrawTextTask(text,style)

text:要繪制的文字

style：文字樣式，包括 x：文字繪制起始位置左上角坐標(biāo)x

   y：文字繪制其實(shí)位置左上角坐標(biāo)y

   width：文字一行的寬度，超出會(huì)自動(dòng)進(jìn)行換行

   fontSize：文字大小，整數(shù)，單位為px

   fontWeight：文字粗細(xì)bold、bolder等或者400，500，600...同css的font-weight

   fontFamily：文字字體，同css

   lineHeight：行高，整數(shù)，單位px

   color：顏色

   marginBottom：如果有多段文字，還可以指定段落之間的距離

文字繪制，同樣是異步的，知道調(diào)用draw(callback)才真正進(jìn)行繪制

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>
<script> var canvas=new LiCanvas('test')
   canvas.addDrawTextTask("要繪制的文字",{
           x:110,
           y:496,
           width:1340,
           fontSize:54,
           fontWeight:'bolder',
           fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif",
           lineHeight:70,
           color:'#1a1a1a',
           marginBottom:40
   })
    canvas.draw(()=>{
          console.log("繪制完成")
       }) </script>
</body>
    ...

•繪制多段文字

方法1：反復(fù)調(diào)用addDrawTextTask(text,style)，同上

方法2：text可以傳入一個(gè)數(shù)組，可以共用style

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var canvas=new LiCanvas('test')
   canvas.addDrawTextTask(["要繪制的文字段落1","要繪制的文字段落2"],{
           x:110,
           y:496,
           width:1340,
           fontSize:54,
           fontWeight:'bolder',
           fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif",
           lineHeight:70,
           color:'#1a1a1a',
           marginBottom:40
   })

    canvas.draw(()=>{
          console.log("繪制完成")
       }) </script>
</body>
    ...

其中style也可以在對(duì)象實(shí)例化的時(shí)候傳入一個(gè)默認(rèn)值，避免反復(fù)設(shè)置一些共用的style

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>
<script> var canvas=new LiCanvas('test',{
       fontStyle:{
           fontSize:20,
           fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif",
           lineHeight:70,
           color:'#1a1a1a',
           marginBottom:40
       }
   })
   canvas.addDrawTextTask("要繪制的文字段落1",{
           x:110,
           y:496,
           width:1340,
   })
   canvas.addDrawTextTask("要繪制的文字段落2",{
              x:110,
              y:696,
              width:1340,
      })
    canvas.draw(()=>{
          console.log("繪制完成")
       }) </script>
</body>
    ...

如果多段文字中，有一段的文字需要設(shè)置不同的樣式，也可以單獨(dú)指定樣式，如下， 是不是很靈活~

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>
<script> var canvas=new LiCanvas('test',{
       fontStyle:{
           fontSize:20,
           fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif",
           lineHeight:70,
           color:'#1a1a1a',
           marginBottom:40
       }
   })
   canvas.addDrawTextTask([{
       text:"要繪制的段落文字1",
       fontSize：60
   },"要繪制的文字段落2","要繪制的文字段落3"],{
           x:110,
           y:496,
           width:1340,
   })
   canvas.draw(()=>{
          console.log("繪制完成")
   }) </script>
</body>
    ...

保存下載圖片

•下載圖片

下載為png圖片：saveToPng("文件名")

下載為jpeg圖片：saveToJpeg("文件名")

下載為gif圖片：saveToGif("文件名")

注意：下載圖片必須在draw()的回調(diào)函數(shù)中調(diào)用才可以生效

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var bg={
        src:"http://***.jpg",
        x:0,
        y:0,
        width:1563,
        height:1180,
        borderRadius:0
    }

    var canvas=new LiCanvas('test')
    canvas.addDrawImageTask(bg)
    canvas.draw(()=>{
       canvas.saveToPng("li-canvas")
    }) </script>
</body>
    ...

•獲取圖片數(shù)據(jù)

有時(shí)候，我們并不想下載圖片，比如在微信瀏覽器中，我們其實(shí)是希望用戶長(zhǎng)按圖片保存，此時(shí)，我們希望canvas合成的圖片數(shù)據(jù)，插入到img的src中

調(diào)用：getImageData()可以獲取合成的圖片數(shù)據(jù)  

...
    <script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>
<img src="./bg.jpg" id="img" >
<script> var bg={
        src:"http://***.jpg",
        x:0,
        y:0,
        width:1563,
        height:1180,
        borderRadius:0
    }

    var canvas=new LiCanvas('test')
    canvas.addDrawImageTask(bg)
    canvas.draw(()=>{
       var src=canvas.getImageData()
       document.getElementById('img').src=src
    }) </script>
</body>
    ...

github地址： github.com/501351981/l…  

總結(jié)

以上所述是小編給大家介紹的HTML5中通過li-canvas輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字等，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 詳解html2canvas截圖不能截取圓角圖片的解決方案

    這篇文章主要介紹了詳解html2canvas截圖不能截取圓角圖片的解決方案的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-30

  • 使用HTML5 Canvas繪制圓角矩形及相關(guān)的一些應(yīng)用舉例

    這篇文章主要介紹了使用HTML5 Canvas繪制圓角矩形及相關(guān)的一些應(yīng)用舉例,作者舉了2048小游戲和微信對(duì)話框兩個(gè)實(shí)用的例子來作為操作Canvas API的實(shí)用練習(xí)推薦,需要的朋友可以
    2016-03-22

  • HTML5 Canvas自定義圓角矩形與虛線示例代碼

    HTML5 Canvas繪制對(duì)象中提供的原生功能沒有實(shí)現(xiàn)繪制圓角矩形與虛線的功能，通過JavaScript的Object.prototype可以實(shí)現(xiàn)對(duì)對(duì)象CanvasRenderingContext2D添加這兩個(gè)函數(shù)功能，
    2013-08-02

  • html5 Canvas畫圖教程(10)—把面拆成線條模擬出圓角矩形

    上一篇文章我講了畫矩形和圓形的方法，他們都有原生的canvas繪圖函數(shù)可完成。而本文講的圓角矩形則只有通過其他方法模擬出來,我們動(dòng)用把面拆成線條的能力，很容易就能發(fā)現(xiàn)
    2013-01-09

  • canvas繪制圓角頭像的實(shí)現(xiàn)方法

    這篇文章主要介紹了canvas繪制圓角頭像的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)
    2019-01-17

最新評(píng)論