canvas的写法

canvas的基本写法

*矩形篇
*三角形篇
*文字篇
*图片篇
*视频篇
*canvas与表单数据双向绑定
*canvas实现签名

矩形篇

1. 获取画布唯一对象 const id = document.querySelector('canvas')
2. 然后确定自己要画的是2d还是3d const x = id.getContext('2d')
3. 拿起笔，形成一个闭环的路径 x.beginPath()
4. 绘画时需要确定的起点和路线已经头尾的样式 x.moveTo(10,10) x.lineTo(20,10) x.lineCap = 'round' x.lineJoin = 'round x.miterLimit = 2'
5. 写好样式（填充还是描边）
6. 放下笔 x.closePath()

//画了个矩形
  x.rect(50,50,300,300)

// 找到画板
  const id = document.querySelector('canvas')
  // 取得画笔
  const x = id.getContext('2d')
  //拿起笔
  x.beginPath()
  // 找到需要画的起始点
  x.moveTo(10,10)
  // 然后描边(一个一个获得起始点.)
  x.lineTo(20,10)
  x.lineTo(20,20)
  x.lineTo(10,10)
  // 设置路径的起始和末尾的样式.
  x.lineCap = 'round'
  // 设置路径连接的样式。
  x.lineJoin = 'round'
  //设置路径连接地方不是特别的尖锐(尤其是三角形)
  x.miterLimit = 2
  x.strokeStyle = 'red'
  //上色(填充)
  x.fillStyle = 'white'
  //倒色
  x.fill()
  //描边(边的颜色和厚度)
  x.strokeStyle = 'yellow'
  x.lineWidth = 20
  x.stroke()
  //描实
  x.stroke()
  //放下笔
  x.closePath()

三角形篇

• 利用Math的PI进行图形的绘画

//获取画布
const panel = document.querySelector('#canvas')
//画的类型
const p = panel.getContext('2d')
//拿起笔
p.beginPath()
//起始坐标,半径,起始度数和结束度数,最后参数是顺时针还是逆时针(默认顺时针（false）)
p.arc(50,50,50,0,Math.PI * 2)
p.stroke()
p.closePath()

文字篇

1. 设置字体大小和样式 p.font = '20px 微软雅黑'(必须同时写)
2. 可以设置阴影
   p.shadowBlur = 20 p.shadowColor = 'rgba(0,0,0,1)' p.shadowOffsetX = 10 p.shadowOffsetY = 10

const panel = document.querySelector('#canvas')
const p = panel.getContext('2d')
p.beginPath()
//一个是font-size 一个是font-family(必须同时写)
p.font = '20px 微软雅黑'
//设置阴影
p.shadowBlur = 20
p.shadowColor = 'rgba(0,0,0,1)'
p.shadowOffsetX = 10
p.shadowOffsetY = 10
//实体字
p.fillText('helloWorld',x,100)
//镂空字
p.strokeText('真棒',x,200)

弹幕功能

//简易版本(后期看看能不能进化一下)
const timer = setInterval(()=>{
  //橡皮擦
  p.clearRect(0,0,400,400)
  x-=40
  //实体字
  p.fillText('helloWorld',x,100)
  //镂空字
  p.strokeText('真棒',x,200)
if(x === 0){
  clearInterval(timer)
  console.log('end')
}

图片篇

特别注意 必须等到图片加载完成之后再添加图片

1. 获取图片对象const imgs = new Image() imgs.src = './imges/contact.png'
2. 添加图片 p.drawImage(imgs,20,20)

水印

1. 可以通过文本篇中的fillText等到图片绘制完成之后再写字

const panel = document.querySelector('#canvas')
const p = panel.getContext('2d')
p.beginPath()
//一个图片对象
const imgs = new Image()
imgs.src = './imges/contact.png'
//需要等到图片加载完成之后才能绘制图像
imgs.onload = function(){
  //图像对象，起始位置,还可以设置大小和裁剪大小。
  p.drawImage(imgs,20,20)
  //写上水印
  p.fillText('真棒',30,30)
}
p.closePath()

视频篇

1. 首先获得视频源
2. 然后视频是刷新次数的,所以定义一个定时器,16ms是最好的

  //getimageData获得像素值
  //获取video信息
  const video = document.querySelector('video')
const panel = document.querySelector('#canvas')
const p = panel.getContext('2d')
p.beginPath()
  //点击视频播放的时候开始定时器
  video.onplay = function(){
    //一次一次的刷新视频
    //计时器16ms最优解
    const timer = setInterval(()=>{
      p.drawImage(video,0,0,400,400)
    },16)
  }
  video.onpause = function(){
    clearInterval(timer)
  }
p.closePath()

vue中canvas与表单双向绑定

1. 首先需要准备一个canvas和input表单,定义一个变量双向绑定input表单,接着通过自定义指令实现对表单的输入输出和canvas的双向绑定。

//响应式数据输出给表单
<canvas  width="600" height="600" v-canva="data"></canvas>
<input type="text" v-model="data">
//inserted：接着定义全局自定义指令,首先是初始化的时候,获得一个表单数据然后进行基本的操作。
//updated：接着是等待data数据变化的时候，创建画布并清除画布重新画。
//写一个创建画布的函数
// 获得画布。
function getCanvas (e, binding, flag) {
  const x = e.getContext('2d')
  if (flag) {
    x.clearRect(0, 0, 600, 600)
  }
  x.beginPath()
  x.rect(0, 0, 300, 300)
  x.fillStyle = 'rgba(0,0,0,0.5)'
  x.fill()
  x.font = '20px 微软雅黑'
  x.fillText(binding.value, 100, 100)
  x.closePath()
}
//自定义指令阶段，data数据刚插入以及更新的时候。
Vue.directive('canva', {
  inserted: function (e, binding) {
    getCanvas(e, binding)
  },
  update: function (e, binding) {
    getCanvas(e, binding, 1)
  }
})

canvas实现签名

const canvas = document.querySelector('#canvas')
  const cvs = canvas.getContext('2d')
  let flag = false
  document.addEventListener('mousedown',function(e){
  //笔放下才能写字
    flag  = true
    // 这样是为了让写的内容不连在一起
    cvs.moveTo(e.pageX,e.pageY)
  })
  document.addEventListener('mousemove',function(e){
    if(flag)
    {
      cvs.lineTo(e.pageX,e.pageY)
      cvs.stroke()
    }
  })
  document.addEventListener('mouseup',function(){
    flag  = false
  })