整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML5(六)-Canvas 高級(jí)操作

          一篇文章《HTML5(五)——Canvas API》介紹 canvas 繪制基本圖形,這節(jié)開(kāi)始介紹canvas的高級(jí)操作。

          一、canvas 轉(zhuǎn)換

          canvas 轉(zhuǎn)換常用的幾種方法介紹,如下:

          方法

          描述

          scale()

          縮放當(dāng)前繪圖至更大或更小。

          rotate()

          旋轉(zhuǎn)當(dāng)前繪圖。

          translate()

          重新映射畫(huà)布上的 (0,0) 位置。

          transform()

          替換繪圖的當(dāng)前轉(zhuǎn)換矩陣。

          setTransform()

          將當(dāng)前轉(zhuǎn)換重置為單位矩陣。然后運(yùn)行 transform()。

          1.1 、scale - 縮放

          使用語(yǔ)法:scale(x,y)

          x:表示水平方向的縮放倍數(shù)

          y:表示垂直方向的縮放倍數(shù)

          eg:canvas 繪制的矩形框放大兩倍,代碼如下:

          var canvas = document.getElementById("canvas")
          var ctx = canvas.getContext("2d")
          ctx.scale(2,2)
          ctx.fillStyle="red"
          ctx.fillRect(0,0,200,200)

          1.2、translate - 畫(huà)布平移

          使用語(yǔ)法:translate(x,y)

          x:添加到水平坐標(biāo)上的位置

          y:添加到垂直坐標(biāo)上的位置

          設(shè)置之后開(kāi)始繪制的圖片位置從(x,y)算起。

          eg:繪制兩個(gè)一樣的矩形,一個(gè)在平移前繪制,一個(gè)在平移后繪制,代碼如下:

          var canvas = document.getElementById("canvas")
          var ctx = canvas.getContext("2d")
          ctx.fillStyle="red"
                  
          ctx.fillRect(0,0,200,200)
          //平移
          ctx.translate(200,200)
          ctx.fillRect(0,0,200,200)

          運(yùn)行結(jié)果如圖:

          1.3 、rotate - 旋轉(zhuǎn)

          使用語(yǔ)法:rotate(angle)

          angle 旋轉(zhuǎn)弧度,如果想使用角度,可以把角度轉(zhuǎn)成弧度,公式為:deg * Path.PI/180。

          eg:將一個(gè)矩形旋轉(zhuǎn)45度,代碼如下:

          var canvas = document.getElementById("canvas")
          var ctx = canvas.getContext("2d")
          //旋轉(zhuǎn)45度
          ctx.rotate(45*Math.PI/180)
          ctx.fillStyle="red"
          ctx.fillRect(0,0,200,200)

          運(yùn)行結(jié)果如圖:

          根據(jù)上述結(jié)果我們發(fā)現(xiàn)旋轉(zhuǎn)的時(shí)候,默認(rèn)原點(diǎn)是畫(huà)布的起始點(diǎn),我們想要的旋轉(zhuǎn)是在矩形框中心為原點(diǎn)的旋轉(zhuǎn),此時(shí)我們需要借助上translate平移,重置一下原點(diǎn),修改上述代碼為:

          <canvas width="400" height="400" id="canvas"></canvas>
          
          var canvas = document.getElementById("canvas")
          var ctx = canvas.getContext("2d")
          
          ctx.translate(200,200)
          ctx.rotate(45*Math.PI/180)
          ctx.translate(-200,-200)
          
          ctx.fillStyle="red"
          ctx.fillRect(100,100,200,200)

          運(yùn)行結(jié)果如圖:

          1.4、transform - 矩陣變換

          使用語(yǔ)法:transform(a,b,c,d,e,f)

          • a:水平縮放
          • b:水平傾斜
          • c:垂直傾斜
          • d:垂直縮放
          • e:水平移動(dòng)
          • f:垂直移動(dòng)

          transform可以替代前邊平移、縮放、旋轉(zhuǎn)三者,如下:

          // 平移
          translate(x,y) <=> transform(1,0,0,1,x,y) <=> transform(0,1,1,0,x,y)
          // 縮放
          sacle(x,y) <=> transform(x,0,0,y,0,0) 
          // 旋轉(zhuǎn)
          rotate(angle) <=> transform(Math.cos(angle*Math.PI/180), Math.sin(angel*Math.PI/180), -Math.sin(angle*Math.PI/180), Math.cos(angle*Math.PI/180))

          1.5、setTransform - 矩陣變換

          setTransform()方法將變換的矩陣進(jìn)行重置,它把當(dāng)前的變換矩陣重置為單位矩陣
          使用語(yǔ)法:transform(a,b,c,d,e,f)
          各參數(shù)說(shuō)明:水平旋轉(zhuǎn)、水平傾斜、垂直傾斜、垂直縮放、水平移動(dòng)、垂直移動(dòng)

          setTransform() 方法把當(dāng)前的變換矩陣重置為單位矩陣,然后以相同的參數(shù)運(yùn)行 transform()

          二、canvas 操作圖片

          drawImage() 在畫(huà)布上繪制圖像、畫(huà)布或視頻。也能夠繪制圖片的一部分,增加或減少圖像的尺寸。以下是三種常見(jiàn)使用語(yǔ)法:

          • 語(yǔ)法1:drawImage( img , x , y )
          • 語(yǔ)法2:drawImage( img , x , y , width , height )
          • 語(yǔ)法3:drawImage( img , sx , sy , swidth, sheight , x , y , width , height )

          上述參數(shù)表示的意義如下:

          參數(shù)

          描述

          img

          規(guī)定要使用的圖像、畫(huà)布或視頻。

          sx

          可選。開(kāi)始剪切的 x 坐標(biāo)位置。

          sy

          可選。開(kāi)始剪切的 y 坐標(biāo)位置。

          swidth

          可選。被剪切圖像的寬度。

          sheight

          可選。被剪切圖像的高度。

          x

          在畫(huà)布上放置圖像的 x 坐標(biāo)位置。

          y

          在畫(huà)布上放置圖像的 y 坐標(biāo)位置。

          width

          可選。要使用的圖像的寬度。(伸展或縮小圖像)

          height

          可選。要使用的圖像的高度。(伸展或縮小圖像)

          eg:利用語(yǔ)法3,進(jìn)行繪制圖片的部分內(nèi)容,實(shí)現(xiàn)如下效果:

          給上述兔子順便加一個(gè)點(diǎn)擊屏幕暫停開(kāi)始功能,完整代碼如下:

          <canvas width="400" height="400" id="canvas"></canvas>
          <script>
           var canvas = document.getElementById("canvas")
           var ctx = canvas.getContext("2d")
           var img = new Image()
           let pause = false,frameCounter = 0,i=0;
           img.src = "./rotate.png"
           img.onload = function(){
            requestAnimationFrame(next)
           }
          function next(){
           ctx.clearRect(0,0,canvas.width,canvas.height)
           if(frameCounter%5 == 0){ //frameCounter 控制動(dòng)畫(huà)速度
            i++
            if(i==11)i=0
           }
           ctx.drawImage(img,
            0,i*240,240,240,
            0,0,240,240) // 每張圖片寬高都是240,具體參數(shù)根據(jù)圖片而定
            frameCounter ++
            if(!pause)requestAnimationFrame(next)
           }
          window.onclick = function(){
           pause = !pause
           next()
          }
          </script>

          eg:使用 canvas 畫(huà)布處理視頻,使用定時(shí)器繪制視頻的當(dāng)前幀,連續(xù)起來(lái)就是一個(gè)視頻,需要注意的是必須處理暫停和開(kāi)始播放兩種操作,具體代碼如下:

          var v=document.getElementById("video1");
          var c=document.getElementById("myCanvas");
          ctx=c.getContext('2d');
          v.addEventListener('play',function() {var i=window.setInterval(function() 
          {ctx.drawImage(v,0,0,270,135)},20);},false);
          v.addEventListener('pause',function() {window.clearInterval(i);},false);
          v.addEventListener('ended',function() {clearInterval(i);},false);

          三、像素級(jí)操作

          常見(jiàn)的像素級(jí)的操作有三種:

          • getImageData() - 獲取畫(huà)布像素?cái)?shù)據(jù)
          • createImageData() - 創(chuàng)建新的、空白像素
          • putImageData() - 圖像像素?cái)?shù)據(jù)放回畫(huà)布

          3.1、getImageData

          使用語(yǔ)法:getImageData( x , y , width , height )

          • x:要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 x 坐標(biāo)。
          • y:要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 y 坐標(biāo)。
          • width:被提取的圖像數(shù)據(jù)矩形區(qū)域的寬度
          • height:被提取的圖像數(shù)據(jù)矩形區(qū)域的高度

          返回一個(gè) imageData 對(duì)象,用來(lái)描述 canvas 區(qū)域隱含的像素?cái)?shù)據(jù),這個(gè)區(qū)域通過(guò)像素表示,起點(diǎn)是( x , y ),寬高為 widht 和 height 。

          imageData 對(duì)象包含三個(gè)屬性:

          • imageData.height - 像素描述的矩形實(shí)際高度。
          • imageData.width - 像素描述的矩形實(shí)際寬度。
          • imageData.data - 包含 rgba 順序數(shù)據(jù)的一個(gè)數(shù)組,數(shù)據(jù)使用0-255直接整數(shù)表示。

          3.2、createImageData

          使用語(yǔ)法:

          createImageData( width , height )

          創(chuàng)建一個(gè)空白的 imageData 對(duì)象,新對(duì)象的默認(rèn)像素值 transparent black。對(duì)于imageData對(duì)象中的每個(gè)像素值,都存在 rgba 這四方面的信息,即:

          • r - 紅色(0-255)
          • g - 綠色(0-255)
          • b - 藍(lán)色(0-255)
          • a - alpha(0-255,0是透明,255是完全可見(jiàn))

          新對(duì)象默認(rèn)像素值為(0,0,0,0)。

          eg:如果我們想把 imageData 中一個(gè)像素變?yōu)榧t色時(shí),可以改變第一和第四位信息,代碼如下:

          var imageData = ctx.createImageData(100,100)
          imageData.data[0] = 255
          imageData.data[1] = 0
          imageData.data[2] = 0
          imageData.data[3] = 255

          3.1、putImageData

          使用語(yǔ)法:

          putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );

          參數(shù)及意義:

          參數(shù)

          描述

          imgData

          規(guī)定要放回畫(huà)布的 ImageData 對(duì)象。

          x

          ImageData 對(duì)象左上角的 x 坐標(biāo),以像素計(jì)。

          y

          ImageData 對(duì)象左上角的 y 坐標(biāo),以像素計(jì)。

          dirtyX

          可選。水平值(x),以像素計(jì),在畫(huà)布上放置圖像的位置。

          dirtyY

          可選。水平值(y),以像素計(jì),在畫(huà)布上放置圖像的位置。

          dirtyWidth

          可選。在畫(huà)布上繪制圖像所使用的寬度。

          dirtyHeight

          可選。在畫(huà)布上繪制圖像所使用的高度。

          通過(guò) getImageData 復(fù)制的指定矩形像素?cái)?shù)據(jù),編輯之后,通過(guò) putImageData 方法將圖像數(shù)據(jù)放回畫(huà)布上。

          eg:添加濾鏡效果:上述兔子是白色的變換成紅色兔子,這時(shí)需要把綠色和藍(lán)色都設(shè)置成0即可,代碼如下:

          果頁(yè)

          在現(xiàn)代網(wǎng)站產(chǎn)品開(kāi)發(fā)中,要想提升用戶體驗(yàn),集成一個(gè)強(qiáng)大的圖像編輯工具至關(guān)重要。今天給大家推薦一款基于HTML5 Canvas的全功能圖像編輯工具——TUI Image Editor。它不僅提供了豐富的功能,還提供了簡(jiǎn)單的集成方式。

          圖像編輯

          裁剪:可以做到精確剪裁圖片,保留重要部分。旋轉(zhuǎn):調(diào)整圖像方向。繪圖:在照片上添加形狀和圖案,還可以添加文本。圖像濾鏡:提供多種濾鏡效果,如灰度、反轉(zhuǎn)、復(fù)古等。

          圖像編輯1

          集成功能

          它還提供了下載功能,當(dāng)用戶編輯完成后,可以直接下載處理后的圖像。同時(shí)也支持從本地或者遠(yuǎn)程加載圖像進(jìn)行編輯。提供了撤銷和重做功能,方便用戶操作,允許用戶充值編輯或者刪除特定對(duì)象。

          圖像編輯2

          自定義主題

          TUI Image Editor支持多種自定義主題,可以根據(jù)不同的需求調(diào)整顯示尺寸和界面風(fēng)格,確保與嵌入的網(wǎng)站整體設(shè)計(jì)一致。

          豐富的主題

          總結(jié)

          TUI Image Editor是一個(gè)強(qiáng)大且易于使用的圖像編輯工具,適合各種網(wǎng)頁(yè)應(yīng)用的集成需求。集成簡(jiǎn)單,提供JavaScript、Vue、React等主流的前端框架集成方案。主持主流瀏覽器,谷歌瀏覽器、IE瀏覽器、蘋果瀏覽器和火狐瀏覽器。它提供了豐富的編輯功能和靈活的自定義選項(xiàng),使得開(kāi)發(fā)者可以輕松為用戶提供高級(jí)的圖像編輯體驗(yàn)。如果你正在尋找一個(gè)高效的圖像編輯解決方案,TUI Image Editoe無(wú)疑是一個(gè)值得考慮的選擇。截止目前github已有超過(guò)6.9K的Star。如果覺(jué)得不錯(cuò)幫忙點(diǎn)贊關(guān)注下。#github項(xiàng)目推薦#


          主站蜘蛛池模板: 亚洲国产韩国一区二区| 国产乱人伦精品一区二区在线观看 | 久久精品一区二区国产| 男人免费视频一区二区在线观看| 亚洲中文字幕一区精品自拍| 日韩美一区二区三区| 国产成人精品视频一区| 成人精品视频一区二区三区| 久久精品岛国av一区二区无码| 国产精品久久久久久麻豆一区| 久热国产精品视频一区二区三区| 波多野结衣一区二区免费视频| 国产精品538一区二区在线| 国产精品无码一区二区在线观一 | 国产精品香蕉在线一区| 国产亚洲一区二区在线观看| 人妻无码一区二区三区AV| 国产怡春院无码一区二区| 国产精品亚洲高清一区二区| 无码精品人妻一区二区三区人妻斩 | 日亚毛片免费乱码不卡一区 | 国产一区在线mmai| 无码人妻AⅤ一区二区三区水密桃| 国产婷婷色一区二区三区| 精品国产AV无码一区二区三区 | 中文字幕一区二区精品区| 国产一区二区草草影院| 高清国产AV一区二区三区| 欧美激情国产精品视频一区二区 | 亚洲一区二区三区高清| 日韩精品人妻一区二区三区四区| 香蕉在线精品一区二区| 亚洲一区二区三区国产精华液| 天天看高清无码一区二区三区| 国产美女在线一区二区三区| 3d动漫精品啪啪一区二区免费| 97久久精品一区二区三区| 国产色精品vr一区区三区| 精品国产天堂综合一区在线| 无码国产精成人午夜视频一区二区| 免费无码一区二区三区蜜桃大|