canvas

canvas

<canvas id="c1" width="600" height="400"></canvas>
<script>
	// 找到画板
	var canvas = document.querySelector('#c1')
	// 获取画笔
	var ctx = canvas.getContext('2d')
	// 画一个圆(x:x轴上的距离，y:y轴上的距离，r:半径，开始角度，结束角度，（true:逆时针）)
	ctx.arc(100, 100, 50, 0, 2*Math.PI/4, false)
    // 绘制路径
    ctx.stroke()
    // 填充路径
    ctx.fill()
</script>

1. 绘制矩形

   // 左上角顶点的水平位置，竖直位置，宽，高
   ctx.rect(50, 50, 100, 100)
   // 填充的样式
   ctx.fillStyle = 'red'
   

2. 将图像绘制到画布上

   <script>
   	// 获取图像对象
       var img = new Image()
       // 设置图像的 src 路径
       img.src = 'xxx.jpg'
       // 监听图像是否加载到
       img.onload = function() {
           // 将图像绘制到画板上（异步操作）
           ctx.drawImage(img, 0, 0, 600, 400)
       }
   </script>
   

3. 将文字绘制到画布上

   <script>
   	// 设置字体
       ctx.font = 'bold 30px 微软雅黑'
       // 设置填充字体和位置
       ctx.fillText('xxxxx', 180, 200)
       // 设置镂空字体
       ctx.strokeText('xxxxx', 180, 200)
   </script>
   

4. 路径样式

   <canvas id="c1" width="600" height="400"></canvas>
   <script>
       // 设置起始点
   	ctx.beginPath()
       // 起始点的坐标
       ctx.moveTo(100, 100)
       // 直线要到哪个位置
       ctx.lineTo(200, 200)
       ctx.lineTo(400, 200)
       // 设置端点的样式
       ctx.lineCap = 'round'
       // 设置拐角的样式
       ctx.lineJoin = 'round'
       // 设置路径的宽度
       ctx.lineWidth = 100
       // 绘制路径
       ctx.stroke()
       // 设置结束点
       ctx.closePath()
   </script>
   

5. 也可监听视频的播放

   <video src="yf.mp4" width="800" height="400" controls="controls" style="display: none;"></video>
   <canvas id="c1" width="800" height="400"></canvas>
   <input type="text" name="" id="txt" value="" />
   <button type="button">播放</button>
   <script type="text/javascript">
   // 找到绘制的画板
   var canvas = document.querySelector('#c1')
   // 获取这个画板绘制的对象（画笔）
   var ctx = canvas.getContext('2d')
   
   var video = document.querySelector('video')
   // 弄一个水印
   var zhangImg = new Image()
   zhangImg.src = 'wc.png'
   var x = 0
   
   // 监听 video 播放
   video.onplay = function(event) {
       // console.log(event)
       setInterval(function() {
           x = x + 1
           if(x>800) {
           	x=0
           }
           ctx.drawImage(video,0,0,800,400)
           ctx.drawImage(zhangImg, x, 250, 100, 100)
       }, 16)
   }
   var btn = document.querySelector('button')
   btn.onclick = function() {
       if(video.paused) {
       	video.play()
       } else {
       	video.pause()
       }
   }
   
   var txt = document.querySelector('#txt')
   txt.onkeydown = function(event) {
       if(event.code == 'Enter') {
           var dan = txt.value
           // console.log(dan)
           ctx.font = 'bold 20px 微软雅黑'
           // ctx.fontStyle = '#fff'
           var txtx = 0
           setInterval(function() {
               txtx++
               if(txtx > 800) {
               txtx = 0
           }
           	ctx.fillText(dan, txtx, 30)
           }, 16)
       }
   }
   </script>
   

6. 图像旋转

   <script>
       // 设置图像的位置
   	ctx.translate(X,Y)
       // 设置图像旋转
       ctx.rotate(Math.PI/4)
       // 缩小放大(长、宽)
       ctx.scale(2, 2)
   </script>
   

7. 图像叠加

   <script>
       // source-over: 设置新图像显示在旧图像之上
       // destination-over: 源图像显示在目标图像之上
       // source-atop: 目标图像位于源图像之外不可见
       // source-in: 在目标图像上显示源图像
       // source-out: 显示目标图像，源图像那一部分透明
       // destination-atop: 显示目标图像位于源图像之外的部分
       // destination-in: 在目标图像上不显示源图像
       // destination-out: 将目标图像显示在源图像之上
   	ctx.globalCompositeOperation = 'detination-out'
   </script>
   

8. 设置画笔的存档和读档

   <script>
       // 设置画笔对象的存档
   	ctx.save()
       // 恢复之前的保留的画笔状态（相邻的save）
       ctx.restore()
   </script>