canvas自定义编辑器

最新推荐文章于 2024-07-22 13:54:25 发布
最新推荐文章于 2024-07-22 13:54:25 发布
阅读量1.3k 收藏
点赞数
分类专栏： canvas javascript 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VLilyV/article/details/73274792
版权

也是这段时间整理电脑，发现很多以前做的小案例，有些存在U盘中的项目已经打不开了（U盘坏了,欲哭！），现在有空了就往博客上发一些，以示永不停止的学习和总结（放在线上的资料不仅可以和大家分享还能随时学习，而且丢的可能性很低啦）。
html和js代码：
效果图：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义播放器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body>
    <div class="content" >
        <video id="video" >
            <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="">
            <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="">
        </video>
        <div class="customCon">
            <a href="javascript:;" class="stopToP" style="display: block;" ></a>
            <a href="javascript:;" class="playToS" style="display: none;" ></a>
            <div class="progressBox">
                <div class="progressVideo">
                <div class="overVideo">
                    <span></span>
                </div>
                </div>
            </div>
            <div class="overTime">00:00</div>
            <span class="spTime" >/</span>
            <div class="allTime">01:29</div>
            <div class="progressBox2">
                <div class="progressAudio">
                <div class="overAudio">
                    <span></span>
                </div>
                </div>
            </div>
            <a href="javascript:;" class="fullScreen"></a>
        </div>
    </div>
<script type="text/javascript">
    // 获取视频信息
    var oVideo = document.querySelector('#video');
    // 获取播放暂停按钮
    var oStopToP = document.querySelector('.stopToP');
    var oPlayToS = document.querySelector('.playToS');
    // 获取时间
    var oOverTime = document.querySelector('.overTime');
    var oAllTime = document.querySelector('.allTime');
    // 播放进度条
    var oProgress = document.querySelector('.progressVideo');
    var oOver = document.querySelector('.overVideo');
    // 时间进度条
    var oProgressA = document.querySelector('.progressAudio');
    var oOverA = document.querySelector('.overAudio');
    // 全屏
    var ofullScreen = document.querySelector('.fullScreen');

    // 所有视频播放（暂停）的前提条件就是视频可播放
    oVideo.addEventListener('canplay',function(){
        oVideo.removeEventListener('canplay', arguments.callee);
        // 点击暂停按钮，它转化为播放按钮，视频同时播放（注意先判断视频的状态）
        oStopToP.onclick = function(){
            oVideo.play();
            stopState();    
        }
        // 点击播放按钮，它转化为暂停按钮，视频同时停止（注意先判断视频的状态）
        oPlayToS.onclick = function(){
            oVideo.pause();
            playState();
        }
        // 获取视频的总时间，传递给oAllTime中，注意时间转化为分秒的形式
        oAllTime.innerHTML = timeT(oVideo.duration);
        oVideo.addEventListener("timeupdate",function(){
            oOverTime.innerHTML =timeT(oVideo.currentTime);
            // 让视频的进度条随着时间的播放而走动
            oOver.style.width = oVideo.currentTime/oVideo.duration*100+"%";
        },false)
        // 注意分析，当点击进度条上的任何一个地方需要，发生的变化：
        // 1，进度条走到那里（通过offsetX事件可自动获取）
        // 2，用当前时间(oVideo.currentTime)跳转到那里以控制视频也跳到那里,
        // 不要赋值给oAllTime.innerHTML，因为它无法控制视频的播放，而且上面已经给过，
        // 注意offsetX，获取的是你点击的这个物体的地方到它的最左边的距离用px表示，而我们设置用的是%类型
        oProgress.addEventListener("click",function(event){
            var x = event.offsetX;
            var width = this.offsetWidth;
            var scale = x/width;
            oOver.style.width = scale*100+"%";
            oVideo.currentTime = scale*oVideo.duration;
        },false)
        oProgressA.addEventListener("click",function(event){
            var x = event.offsetX;
            var width = this.offsetWidth;
            var scale = x/width;
            oOverA.style.width = scale*100+"%";
            oVideo.volume = scale;
        },false)
        // 如果视频结束返回初始状态
        oVideo.addEventListener('ended',function(){
            this.currentTime=0;
            playState();
        },false)
        // 全屏
        ofullScreen.addEventListener("click",function(){
            oVideo.webkitRequestFullScreen();
        },false)
    },false)
    // 把时间转化成分秒的方式，用同一个变量来存放不同时期的值
    function timeT(num){
        var m = Math.floor(num/60);
        var s = Math.floor(num%60);
        m = m > 9 ? m : "0" + m;
        s = s > 9 ? s : "0" + s;
        return m + ":" + s;
    }
    // 播放状态
    function playState(){
        if(oVideo.paused){
            oStopToP.style.display = "block";
            oPlayToS.style.display = "none";

        }
    }
    // 暂停状态
    function stopState(){
        if(!oVideo.paused){
            oStopToP.style.display = "none";
            oPlayToS.style.display = "block";s
        }
    }
</script>
</body>
</html>

相应css样式：

*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 100%;
    background: rgb(69,63,63);
}
.content{
    width: 500px;
    /*border: 6px solid red;*/
    margin: 0 auto;
}
video{
    width: 500px;
    float: left;
}
.customCon{
    box-sizing: border-box;
    width: 500px;
    height: 45px;
    border-top: 2px solid rgb(69,63,63);
    background: rgb(234,234,234);
    float: left;
    position: relative;
}
.stopToP,.playToS{
    float: left;
    width: 40px;
    height: 40px;
    /*border: 1px solid red;*/
}
.customCon a:nth-child(1){
    background: url(../images/sprite.png) no-repeat 0px 4px;
    display: block;

}
.customCon a:nth-child(2){
    background: url(../images/sprite.png) no-repeat -40px 4px;
    display: none;
}
.progressBox{
    width: 250px;
    height: 9px;
    line-height: 20px;
    /*border:1px solid red;*/
    background: #706d6d;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin-top: 18px;
    float: left;
    box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
    -webkit-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
    -moz-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
}
/*记得宽度都要用 %来表示,且给子元素定位时，
一定要给确认的父元素加position: relative;，因为它的%宽度会和父元素的一样
,注意要减去按钮本身的宽度*/
.progressVideo{
    width: 97%;
    height: 9px;
    /*border:1px solid red;*/
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    cursor: pointer;
    position: relative;
}
.overVideo{
    width: 0%;
    height: 9px;
    display: inline-block;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background: url(../images/play-bar.png) repeat-x;
    position: absolute;

}
.overVideo span{
    /*border:1px solid red;*/
    width: 16px;
    height: 16px;
    background: url(../images/handle.png) no-repeat;
    position: absolute;
    top: -3px;
    right: -10px;

}
.overTime,.allTime,.spTime{
    float: left;
    color: rgb(102,107,77);
    font-size: 13px;
    /*border:1px solid red;*/
    margin-top: 13px;
}
.overTime{
    margin-left: 5px;
}
.allTime{
    margin-right: 5px;
}
.spTime{
    font-size: 12px;
    margin:12px 5px 0 5px; 
}

.progressBox2{
    float: left;
    width: 80px;
    height: 9px;
    background: rgb(112,109,109);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    cursor: pointer;
    margin-top: 17px;

    /*border:1px solid blue;*/
    box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
    -webkit-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
    -moz-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
}
.progressAudio{
    /*border:1px solid red;*/
    width: 89%;
    height: 9px;
    position: relative;
}
.overAudio{
    /*border:1px solid red;*/
    width: 50%;
    height: 9px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background: rgb(112,109,109);
    display: inline-block;
    position: absolute;
}
.progressAudio span{
    /*display: inline-block;*/
    /*border:1px solid red;*/
    width: 10px;
    height: 9px;
    background: url(../images/volume.png) no-repeat;
    position: absolute;
    top: 0px;
    right: -9px; 

}
.fullScreen{
    float: left;
    width: 20px;
    height: 20px;
    /*border:1px solid red;*/
    background: url(../images/sprite.png) no-repeat -160px -8px;
    margin: 10px 0 0 10px;
}

完整资源下载：
http://download.csdn.net/detail/vlilyv/9871035

VLilyV
关注
专栏目录
自定义Canvas
glm_970414161的博客
07-11 523
第六天（下）
html5在线编辑器基于canvas实现
02-01
html5在线编辑器基于canvas实现
vue2项目集成canvas-editor文本编辑器
最新发布
BrandTF的博客
07-22 2417
vue2项目集成 canvas-editor 富文本编辑器; canvas-ediotr并不是一款开箱即用的插件, 需要通过下载源码来进行手动集成到项目中; 源码地址: https://github.com/Hufe921/canvas-editor 官方文档: https://hufe.club/canvas-editor-docs/guide/schema.html 本地运行结果: canvas-editor通过 vue3 + TypeScript 进行编写的, 考虑到大部分的 vue2项目中并没有集
用canvas编辑你的图片
大转转FE
02-22 1018
写在前面最近接到一个需求：线下质检时根据上传的图片和实物进行对比检测，需要在图片上的动态标记出有瑕疵或污点等位置，便于后续流程检测和记录。想到了之前用过的 canvas 可以实现这个功能，...
canvas图形编辑器
嘿嘿
01-31 2186
原文地址：canvas图形编辑器 使用canvas进行开发项目，我们离不开各种线段，曲线，图形，但每次都必须用代码一步一步去实现，显得非常麻烦。有没有一种类似于PS，CAD之类的可视化工具，绘制出基本的图形，然后输出代码。之后我们就可以在这个生成的图形场景的基础上去实现功能，那将是多么的美妙的事啊。话不多说，我们来实现一个图形编辑器吧????。 主要实现如下的功能： 直线(实线、虚线) 贝塞尔曲线...
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
画布文本编辑器教程 为什么要写另一个编辑器？ 令人惊讶的是，您几乎找不到关于创建适当，快速且功能完整的纯文本编辑器的信息。 所有可用的信息要么很旧，不能指示最近的趋势，要么非常含糊和无益。 我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； 鼠标光标导航和选择； 复制和粘贴支持； 简单的搜索和替换； 行号。 这些是技术要求： 足够快以处理至少100 kb的文本； 没有外部依赖性； 在所有现代浏览器中均可使用； 使用BDD或TDD构建。 我不打算具有以下任何功能来使任务更切合实际，因为这些主题中的每一个都有足够的问题来撰写有关以下内容的书： 支持RTL文本，象形文字和垂直文本； 搜索; 语法高
微信小程序canvas编辑器（真机可用）
03-15
微信小程序canvas编辑器是一款专为微信小程序开发设计的工具，它允许开发者在canvas画布上进行各种图形绘制和编辑操作，适用于创建互动式图形、游戏、数据可视化等应用场景。canvas是HTML5的一个重要元素，而在微信...
电子病历编辑器（自定义编辑器）
11-11
电子病历编辑器，是一个文本排版功能的编辑器，一个类似word或wps用于文字排版相关功能的控件，默认支持藏文等有紧缩字符的文本，这导致文件保存后体积比不支持藏文等要大，如果你只需要中文和英文支持且对体积有...
YTextEditor:canvas 富文本编辑器，支持中文
07-04
Canvas富文本编辑器的优势在于，它可以提供高度自定义的文本渲染和编辑体验，因为它直接在像素级别操作，可以实现复杂的文字布局和效果。然而，Canvas本身并不直接支持文本编辑，因此`YTextEditor`需要通过...
基于canvas的前端图片编辑器
08-11
在图片编辑器中，Canvas被用来显示和修改图片，用户可以通过JavaScript代码与Canvas交互，实现图片的实时编辑。 此编辑器支持的功能包括： 1. 方形和圆形：用户可以选择绘制不同形状的边框，例如方形和圆形，并...
CanvasEditor:使用HTML5 Canvas的具有IDE功能的简单文本编辑器
05-18
画布编辑器 使用HTML5 Canvas的具有IDE功能的简单文本编辑器 愿景和下一步 这只是一个概念证明，表明HTMl canvas可以用于带有闪烁光标和内容辅助（intelliSense）窗口等的简单文本编辑器。下一步是将这些功能迁移到一个类中，允许多行，并使contentAssist窗口与最后输入的单词对齐。
基于HTML5和Canvas的图片编辑
07-20
Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter Download, Image Load, Undo, Redo, Reset, Delete Object(Shape, Line, Mask Image...) Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, GradientTransparency, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend
文字画板编辑器
10-17
一个制作文本字符画的小工具，国产绿色软件，兼容中英字符。使用鼠标操作，可轻松在文本文件上画出圆、方、线、弧、点、随机点等图案。可以通过“发表作品”功能，将作品上传到主页上，供大家一起观赏。
canvas系列教程01-编辑器和helloword
dabinge666的博客
12-21 302
话说年底了，今年承诺了一些js教程还没来得及写，说到了就得办到，年底了，陆续把欠的账换上，首先写一个canvas系列教程，一来是问的人多，二来是简单。 总结起来就一句话，我要认真的浪一把。 **第一个问题先解决为啥学canvas，而不用flash.** 因为flash不好用。（这样是不是一句话把天聊死了？） 好吧，详细解释下，第一是因为flash不好用，第二
如何用canvas实现一个富文本编辑器
sinat_33488770的博客
06-24 3464
到这里我们实现了一个类似Word的富文本编辑器，支持文字的编辑，支持有限的文字样式，支持光标，支持选区，当然，这是最基本最基本的功能，随便想想就知道还有很多功能没实现，比如复制、粘贴、方向键切换光标位置、拖拽选区到其他位置、前进后退等，以及支持图片、表格、链接、代码块等文本之外的元素，所以想要实现一个完整可用的富文本是非常复杂的，要考虑的问题非常多。。。
用Canvas实现文本编辑器（支持艺术字渲染与动画）
weixin_34088583的博客
03-24 3332
导言 目前富文本编辑器的实现主要有两种技术方案：一个是利用contenteditable属性直接对html元素进行编辑，如draft.js；另一种是代理textarea + 自定义div + 模拟光标实现。对于类似"word"的经典富文本编辑器，一般会采用以上两种技术方案之一，而不会考虑用canvas实现。 事实上，官方最佳实践中已经特别...
Canvas简单的文本编辑器实现18
编程是一门实践技术
05-22 374
【4】、行绘制 每次在mousedown时创建一个line对象，它里面包含坐标，所以在keypress时会在原地追加文字，是mousedown, keydown, keypress的事体集合，关键注意key事件的关系运用 【5】、段落的绘制 在段中会有多个行对象 *///在canvs中并没有提供对文本编辑的太多支持，所有的比如光标、换行、复制、等操作都需要用底层的API来实现，其中光标可以封装成一个对象，在canvas中建议不要自己实现其文本编辑功能，可以结合html和canvas混合使用 /*
探索Canvas Text Editor：构建一款现代化的文本编辑器
gitblog_00047的博客
05-25 480
探索Canvas Text Editor：构建一款现代化的文本编辑器 项目地址:https://gitcode.com/grassator/canvas-text-editor-tutorial 在数字化的时代，我们每天都在与各种文本编辑器打交道，但您是否曾经想过自己动手创建一个？现在，有了Canvas Text Editor Tutorial，您可以学习并实现这一目标。这是一个开源项目，旨在通过...
canvas 文本编辑器
08-11
对于使用Canvas创建一个文本编辑器，您可以按照以下步骤进行操作： 1. 创建Canvas元素：在HTML中创建一个Canvas元素，设置宽度和高度，以容纳文本编辑器的大小。 ```html <canvas id="editor" width="500" height=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值