canvas学习记录

最新推荐文章于 2024-07-04 16:37:43 发布

前端小甜

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量278

点赞数

分类专栏：学习文章标签：前端 canvas

本文链接：https://blog.csdn.net/qq_45226846/article/details/122011917

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、canvas实现弹幕功能

<body>
  <!-- 1、创建画布 -->
  <canvas id="canvas1" width="600" height="600"></canvas>
  <script>
    // 2、找到画布
    let canvas1 = document.getElementById("canvas1")
    // 3、创建画笔
    let ctx = canvas1.getContext('2d')
    // 4、画文字
    ctx.font = "20px 仿宋"
    let x = 600
    // 循环画，每次位置坐标改变
    setInterval(()=>{
      // 清除画布，否则一直画一直画。
      ctx.clearRect(0,0,600,600)
      if(x<-100)x=600
      x-=10
      ctx.fillText("笑死",x,100)
      ctx.fillText("人才",x+120,100)
      ctx.strokeText("晚上吃啥",x,200)
    },100)
    
  </script>
</body>

效果展示：
在这里插入图片描述

2、canvas实现绘制图片

	// 绘制图片
    let img = new Image()
    img.src = "./images/woman.jpg"
    img.onload = function(){
      ctx.drawImage(img,0,0,600,400)   //(img位置，x，y，裁剪大小)
    }

加了图片后

3、canvas实现播放视频

既然会画text、会画图片【视频】了，结合一下

<body>
  <!-- 1、创建画布 -->
  <canvas id="canvas1" width="640" height="360"></canvas>
  <video src="./images/1.mp4" controls></video>
  <script>
    // 2、找到画布与视频
    let canvas1 = document.getElementById("canvas1")
    let video = document.getElementsByTagName('video')[0]
    // 3、创建画笔
    let ctx = canvas1.getContext('2d')
    let timer;
    video.onplay = function(){
      // video开始播放，每16毫秒截取一张video画面放到canvas。
      timer = setInterval(() => {
        ctx.clearRect(0,0,640,360)
        ctx.drawImage(video,0,0,640,360)

        ctx.font = "30px 宋体"
        ctx.strokeText("前端小菜",20,50)
      }, 16);
    }
    video.onpause = function(){
      // video暂停，则canvas也暂停
      clearInterval(timer)
    }
  </script>
</body>

成果展示：
注：这里能实现视频效果，是因为16相当于刷新率60。
canvas与video同步播放

4、canvas实现画板功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画板</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .menu{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .btn,.btn1{
      width: 150px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin: 20px 0;
      cursor: pointer;
    }
    #canvas1{
      border: 1px solid #000;
    }

    .line{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .fine{
      content: "";
      background-color: #333;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      display: block;
    }
    .normal{
      content: "";
      background-color: #333;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      display: block;
    }
    .coarse{
      content: "";
      background-color: #333;
      width: 18px;
      height: 18px;
      border-radius: 9px;
      display: block;
    }

  </style>
</head>
<body>
  <div class="menu">
    <div class="btn huabi">画笔</div>
    <div class="btn rect">矩形</div>
    <!-- coarse fine noraml -->
    <div class="btn1 line fine"></div>   
    <div class="btn">画笔颜色</div>
    <div class="btn download">
      <a class="downBtn" href="" download="download">下载</a>
    </div>
  </div>
  <!-- 1、创建画布 -->
  <canvas id="canvas1" height="600"></canvas>
  <script>
    let canvas1 = document.getElementById("canvas1")
    let huabi = document.getElementsByClassName('huabi')[0]
    let rect = document.getElementsByClassName('rect')[0]
    let line = document.getElementsByClassName('line')[0]
    let downBtn = document.getElementsByClassName('download')[0]
    canvas1.setAttribute('width',canvas1.offsetWidth)
    let ctx = canvas1.getContext('2d')
    let hua = {
      type:'',
      isDraw:false,
      beginX:0,
      beginY:0,
      // 保留之前画的
      imageData:'',
      // 画笔粗细
      lineWidth:6,
      // 画笔画
      huabiFn(e){
        let x = e.pageX - canvas1.offsetLeft;
        let y = e.pageY - canvas1.offsetTop;
        ctx.beginPath()
        ctx.arc(x,y,3,0,2*Math.PI)
        ctx.strokeStyle = hua.lineWidth
        ctx.fillStyle = "orange"
        ctx.fill()
        ctx.closePath()
      },
      // 画矩形
      rectFn(e){
        let x = e.pageX - canvas1.offsetLeft;
        let y = e.pageY - canvas1.offsetTop;
        ctx.clearRect(0,0,canvas1.offsetWidth,600)
         // 把之前的画出来
         if(hua.imageData!==""){
           ctx.putImageData(hua.imageData,0,0,0,0,canvas1.offsetWidth,600)
         }
        ctx.beginPath()
        ctx.rect(hua.beginX,hua.beginY,x-hua.beginX,y-hua.beginY)
        ctx.fillStyle = "pink"
        ctx.fill()
        ctx.closePath()
      }
    }
    huabi.onclick = function(){
      hua.type = 'huabi'
    }
    rect.onclick = function(){
      hua.type = 'rect'
    }
    //在画布内按下鼠标
    canvas1.onmousedown = function(e){
      hua.isDraw= true
      if(hua.type==="rect"){
        hua.beginX = e.pageX - canvas1.offsetLeft;
        hua.beginY = e.pageY - canvas1.offsetTop;
      }
    }
    //在画布内抬起鼠标
    canvas1.onmouseup = function(){
      hua.isDraw=false
      hua.imageData = ctx.getImageData(0,0,canvas1.offsetWidth,600)
    }
    //在画布内移动鼠标
    canvas1.onmousemove = function(e){
      if(hua.isDraw){
        hua[hua.type+'Fn'](e)
      }
    }
    //调整画笔粗细的按钮
    line.onclick = function(){
      if(hua.lineWidth===6){
        hua.lineWidth = 12
        line.classList.remove('fine')
        line.classList.add('normal')
      }else if(hua.lineWidth===12){
        hua.lineWidth = 18
        line.classList.remove('normal')
        line.classList.add('coarse')
      }else{
        hua.lineWidth = 6
        line.classList.remove('coarse')
        line.classList.add('fine')
      }
    }

    // 点击下载按钮
    downBtn.onclick = function(){
      let a = document.getElementsByClassName('downBtn')[0]
      //下载的核心：toDataURL()
      let url = canvas1.toDataURL()
      a.setAttribute('href',url)
    }
  </script>
</body>
</html>

功能演示：
在这里插入图片描述

前端小甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习记录

1、canvas实现弹幕功能<body>  <canvas id="canvas1" width="600" height="600"></canvas> <script> // 2、找到画布 let canvas1 = document.getElementById("canvas1") // 3、创建画笔 let ctx = canvas1.getContext('2d
复制链接

扫一扫