canvas 绘制图像(2021/5/6)

以你之姓@ 2023-01-18 14:30 6阅读 0赞

<canvas id="canvas" width="600" height="600"></canvas>
    <script>
            
            // ctx.drawImage(路径,图像裁剪的位置X,图像裁剪的位置Y,裁剪的宽度，裁剪的高度,位置X,位置Y,图片宽度，图片高度)
            var canvas = document.querySelector("#canvas")
            var ctx = canvas.getContext('2d')
            // 绘制图像 //需要请求，不会里面出现图像
            var img = new Image()
            img.src = './pic/1.jpeg'
            // 图片载入数据后再绘制内容
            img.onload = function(){ 
                    ctx.drawImage(img,50,50)
            }
            var img2 = new Image()
            img2.src = './pic/2.jpeg'
            // 图片载入数据后再绘制内容
            img2.onload = function(){ 
                    ctx.drawImage(img2,50,50)
            }
    
            // 导入视频 //不容易泄漏
    </script>

> 视频绘制

<canvas id="canvas" width="800" height="600"></canvas>
     <video src="./pic/video.mp4" controls="controls" width="800" height=""></video>
    
     <script type="text/javascript">
             var video = document.querySelector('video')
             var canvas = document.querySelector('#canvas')
    
             var interId;
             var ctx = canvas.getContext('2d')
             video.onplay = function(){ 
                     interId = setInterval(() => { 
                             ctx.clearRect(0,0,800,600) //清除背景
                             ctx.fillRect(0,0,800,600)// 填充背景
                             ctx.drawImage(video,0,75,800,450)
                     }, 16);
             }
             video.onpause = function(){ 
                     clearInterval(interId)
             }
     </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas 绘制图像(2021/5/6)

<canvas id="canvas" width="600" height="600"></canva

以你之姓@/ 2023年01月18日 14:30/ 0 赞/ 7 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 259 阅读

相关 html5绘制div,HTML5 Canvas 绘制图像

canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG，GIF，JPEG等)都可以引入到 canvas 中，而且其它的 canv

本是古典何须时尚/ 2022年10月06日 13:56/ 0 赞/ 284 阅读

相关 Canvas入门（3）:图像处理和绘制文字

来源：[http://www.ido321.com/997.html][http_www.ido321.com_997.html] 一、图像处理(非特别说明，所有结果均来自最

末蓝、/ 2022年08月13日 05:29/ 0 赞/ 267 阅读

相关 canvas(图像)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

本是古典何须时尚/ 2022年06月03日 02:54/ 0 赞/ 179 阅读

相关自定义控件-图像绘制（1）_Canvas详解

Canvas所提供的各种方法根据功能来看大致可以分为几类： > 第一是以drawXXX为主的绘制方法； > > 第二是以clipXXX为主的裁剪方法； > > 第三是以s

朱雀/ 2022年05月24日 09:58/ 0 赞/ 227 阅读

相关 HTML 5 Canvas 绘制图形图像

目录 HTML5 Canvas 创建一个画布（Canvas） JavaScript 绘制图像颜色、样式和阴影线条样式，矩形路径转换，文本图像绘制，

港控/mmm°/ 2022年04月17日 04:53/ 0 赞/ 381 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 517 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 486 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 549 阅读