Canvas(四) 使用图片画布或者video

createPattern

• createPattern(img,repeat-style)

repeat-style 里面有 4 种形式 no-repeat repeat-x repeat-y repeat

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  var backgroundimg = new Image()
  backgroundimg.src = 'back.jpg'
  context.save() //保存
  var pattern = context.createPattern(backgroundimg, 'no-repeat')
  context.fillStyle = pattern
  context.fillRect(0, 0, 800, 800)
  context.restore()
}

• createPattern(canvas,repeat-style)

var bg = document.createElement('canvas')
bg.width = 100
bg.height = 100
var context = canvas.getContext('2d')
context.save()
context.rotate((20 * Math.PI) / 180)
context.restore()
window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  context.save() //保存
  var pattern = context.createPattern(context, 'no-repeat') //传入canvas对象
  context.fillStyle = pattern
  context.fillRect(0, 0, 800, 800)
  context.restore()
}

• createPattern(video,repeat-style)

var context = canvas.getContext('2d')
var video = document.createElement('video')
video.src = '667.mp4'
video.preload = 'preload'
video.autoplay = 'autoplay'
video.height = context.canvas.height
video.width = context.canvas.width

setInterval(function () {
  var pattern = context.createPattern(video, 'no-repeat')
  context.fillStyle = pattern
  context.fillRect(0, 0, context.canvas.width, context.canvas.height)
  pattern = null

  //drowStar...这里执行其他绘画步骤
}, 3000)