有趣的Canvas，你值得擁有！

Canvas 是 HTML5 提供的一個用於展現繪圖效果的標籤. Canvas 原意爲畫布, 在 HTML 頁面中用於展現繪圖效果. 最先 Canvas 是蘋果提出的一個方案, 今天已經在大多數瀏覽器中實現。

canvas 的使用領域

• 遊戲
• 大數據可視化數據
• banner 廣告
• 多媒體
• 模擬仿真
• 遠程操做
• 圖形編輯

判斷瀏覽器是否支持 canvas 標籤

var canvas = document.getElementById('canvas')
if (canvas.getContext) {
  console.log('你的瀏覽器支持Canvas!')
} else {
  console.log('你的瀏覽器不支持Canvas!')
}

canvas 的基本用法

一、使用 canvas 標籤, 便可在頁面中開闢一格區域，能夠設置其寬高，寬高爲 300 和 150

<canvas></canvas>

二、獲取 dom 元素 canvas

canvas 自己不能繪圖. 是使用 JavaScript 來完成繪圖. canvas 對象提供了各類繪圖用的 api。

var cas = document.querySelector('canvas')

三、經過 cas 獲取上下文對象(畫布對象!)

var ctx = cas.getContext('2d')

四、經過 ctx 開始畫畫（設置起點 設置終點 連線-描邊 ）

ctx.moveTo(10, 10)
ctx.lineTo(100, 100)
ctx.stroke()

繪製線條

• 設置開始位置: context.moveTo( x, y )
• 設置終點位置: context.lineTo( x, y )
• 描邊繪製: context.stroke()
• 填充繪製: context.fill()
• 閉合路徑: context.closePath()

canvas 還能夠設置線條的相關屬性，以下：

• CanvasRenderingContext2D.lineWidth 設置線寬.
• CanvasRenderingContext2D.strokeStyle 設置線條顏色.
• CanvasRenderingContext2D.lineCap 設置線末端類型，'butt'( 默認 ), 'round', 'square'.
• CanvasRenderingContext2D.lineJoin 設置相交線的拐點， 'miter'(默認)，'round', 'bevel',
• CanvasRenderingContext2D.getLineDash() 得到線段樣式數組.
• CanvasRenderingContext2D.setLineDash() 設置線段樣式.
• CanvasRenderingContext2D.lineDashOffset 繪製線段偏移量.

封裝一個畫矩形的方法

function myRect(ctxTmp, x, y, w, h) {
  ctxTmp.moveTo(x, y)
  ctxTmp.lineTo(x + w, y)
  ctxTmp.lineTo(x + w, y + h)
  ctxTmp.lineTo(x, y + h)
  ctxTmp.lineTo(x, y)
  ctxTmp.stroke()
}

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')
myRect(ctx, 50, 50, 200, 200)

繪製矩形

• fillRect( x , y , width , height) 填充以(x,y)爲起點寬高分別爲 width、height 的矩形 默認爲黑色
• stokeRect( x , y , width , height) 繪製一個空心以(x,y)爲起點寬高分別爲 width、height 的矩形
• clearRect( x, y , width , height ) 清除以(x,y)爲起點寬高分別爲 width、height 的矩形 爲透明

繪製圓弧

繪製圓弧的方法有

• CanvasRenderingContext2D.arc()
• CanvasRenderingContext2D.arcTo()

6 個參數: x，y(圓心的座標)，半徑，起始的弧度(不是角度 deg)，結束的弧度，(bool 設置方向 ! )

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

ctx.arc(100, 100, 100, 0, degToArc(360))
ctx.stroke()

// 角度轉弧度
function degToArc(num) {
  return (Math.PI / 180) * num
}

繪製扇形

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

ctx.arc(300, 300, 200, degToArc(125), degToArc(300))

// 自動連回原點
ctx.closePath()
ctx.stroke()

function degToArc(num) {
  return (Math.PI / 180) * num
}

製做畫筆

1. 聲明一個變量做爲標識
2. 鼠標按下的時候，記錄起點位置
3. 鼠標移動的時候，開始描繪並連線
4. 鼠標擡起的時候，關閉開關

點擊查看效果圖

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

var isDraw = false
// 鼠標按下事件
cas.addEventListener('mousedown', function () {
  isDraw = true
  ctx.beginPath()
})

// 鼠標移動事件
cas.addEventListener('mousemove', function (e) {
  if (!isDraw) {
    // 沒有按下
    return
  }
  // 獲取相對於容器內的座標
  var x = e.offsetX
  var y = e.offsetY
  ctx.lineTo(x, y)
  ctx.stroke()
})

cas.addEventListener('mouseup', function () {
  // 關閉開關了!
  isDraw = false
})

手動塗擦

原理和畫布類似，只不過用的是clearRect()方法。

點擊查看效果圖

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

ctx.fillRect(0, 0, 600, 600)

// 開關
var isClear = false

cas.addEventListener('mousedown', function () {
  isClear = true
})

cas.addEventListener('mousemove', function (e) {
  if (!isClear) {
    return
  }
  var x = e.offsetX
  var y = e.offsetY
  var w = 20
  var h = 20
  ctx.clearRect(x, y, w, h)
})

cas.addEventListener('mouseup', function () {
  isClear = false
})

刮刮樂

1. 首先須要設置獎品和畫布，將畫布置於圖片上方蓋住，
2. 隨機設置生成獎品。
3. 當手觸摸移動的時候，能夠擦除部分畫布，露出獎品區。

點擊查看效果圖

<div>
  <img src="./images/2.jpg" alt="" />
  <canvas width="600" height="600"></canvas>
</div>

css

img {
  width: 600px;
  height: 600px;
  position: absolute;
  top: 10%;
  left: 30%;
}

canvas {
  width: 600px;
  height: 600px;
  position: absolute;
  top: 10%;
  left: 30%;
  border: 1px solid #000;
}

js

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')
var img = document.querySelector('img')
// 加一個遮罩層
ctx.fillStyle = '#ccc'
ctx.fillRect(0, 0, cas.width, cas.height)
setImgUrl()
// 開關
var isClear = false
cas.addEventListener('mousedown', function () {
  isClear = true
})
cas.addEventListener('mousemove', function (e) {
  if (!isClear) {
    return
  }
  var x = e.offsetX
  var y = e.offsetY
  ctx.clearRect(x, y, 30, 30)
})
cas.addEventListener('mouseup', function () {
  isClear = false
})

function setImgUrl() {
  var arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']
  // 0-3
  var random = Math.round(Math.random() * 3)
  img.src = arr[random]
}

更多demo，請查看 github.com/Michael-lzg…

推薦文章

搭建一個 vue-cli4+webpack 移動端框架（開箱即用）
從零構建到優化一個相似vue-cli的腳手架
封裝一個toast和dialog組件併發布到npm
從零開始構建一個webpack項目
總結幾個webpack打包優化的方法
總結vue知識體系之高級應用篇
總結vue知識體系之實用技巧
總結vue知識體系之基礎入門篇
總結移動端H5開發經常使用技巧（乾貨滿滿哦！）

關注的個人公衆號不按期分享前端知識，與您一塊兒進步！