扣丁學堂HTML5培訓之Vue使用Canvas繪製代碼詳解

今天扣丁學堂HTML5培訓老師給你們分享一篇關於Vue使用Canvas繪製圖片、矩形、線條、文字，下載圖片的源碼及原理，下面咱們一塊兒來看一下吧。

1.1業務場景

圖片儲存在後臺中，根據圖片的地址，在vue頁面中，查看圖片，並根據座標標註指定區域。因爲瀏覽器的機制，使用window.location.href下載圖片時，並不會保存到本地，會在瀏覽器打開。

2.1繪製畫布

<el-dialog

title="查看圖片"

:visible.sync="dialogJPG"

append-to-body>

<canvas id="mycanvas" width="940" height="570"></canvas>

</el-dialog>

這裏爲了交互體驗，使用了element-ui的彈窗方式。將canvas畫布放到了彈窗中。

爲了突出畫布效果能夠在css中設置一個邊框。

mycanvas {

border: 1px solid rgb(199, 198, 198);

}

2.2繪製圖片

// imageUrl爲後臺提供圖片地址

doDraw(imageUrl){

// 獲取canvas

var canvas = document.getElementById("mycanvas")

// 因爲彈窗，確保已獲取到

var a = setInterval(() =>{

// 重複獲取

canvas = document.getElementById("mycanvas")

if(!canvas){

return false

} else {

  clearInterval(a)

  // 能夠理解爲一個畫筆，可畫路徑、矩形、文字、圖像

  var context = canvas.getContext('2d')

  var img = new Image()

  img.src = imageUrl

  // 加載圖片

  img.onload = function(){

    if(img.complete){

      // 根據圖像從新設定了canvas的長寬

      canvas.setAttribute("width",img.width)

      canvas.setAttribute("height",img.height)

      // 繪製圖片

      context.drawImage(img,0,0,img.width,img.height)

    }

  }

}

},1)

},

context.drawImage()方法的參數介紹，

2.3繪製矩形

context.strokeStyle = "red"

context.lineWidth = 3;

context.strokeRect(x, y, width, height)

context同上面的定義

strokeStyle矩形顏色

lineWidth矩形邊框寬度

x,y,width,height矩形位置加長寬

2.4繪製線條

context.moveTo(x1,y1)

context.lineTo(x2,y2)

context.strokeStyle = "red"

context.lineWidth = 3;

context.stroke()

(x1,y1)(x2,y2)線條的起點和終點座標

strokeStylelineWidth線條的樣式

2.5繪製文字

context.font = "26px Arial bolder"

context.fillStyle = 'red'

context.fillText(text,x,y)

fontfillStyle文字樣式

text文字內容

x,y文字顯示座標

2.6下載圖片

// 圖片地址和圖片名稱

downIamge (imgsrc, name) {

let image = new Image()

image.setAttribute('crossOrigin', 'anonymous')

image.onload = function () {

let canvas = document.createElement('canvas')

canvas.width = image.width

canvas.height = image.height

let context = canvas.getContext('2d')

context.drawImage(image, 0, 0, image.width, image.height)

let url = canvas.toDataURL('image/jpg')

let a = document.createElement('a')

let event = new MouseEvent('click')

a.download = name

a.href = url

a.dispatchEvent(event)

}

image.src = imgsrc

},

以上就是關於扣丁學堂HTML5培訓之Vue使用Canvas繪製圖片、矩形、線條、文字，下載圖片,但願對你們有所幫助，想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。