搜尋
首頁web前端H5教程H5中畫布、拖放事件、音視頻的程式碼實例
H5中畫布、拖放事件、音視頻的程式碼實例Aug 01, 2018 pm 02:27 PM
csshtmlhtml5javascript

這篇文章要跟大家介紹的內容是關於H5中畫布、拖放事件以及音視頻的程式碼實例,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、拖曳事件

1.1 設定拖曳

給標籤設定一個draggable設定為true, 標籤就可以拖曳了

1.2 拖曳事件

1.2.1拖曳元素事件(事件物件為被拖曳元素)

  • ondragstart   拖曳前觸發

  • ondragend   拖曳結束觸發

  • ondrag  拖曳前、拖曳結束之間,連續觸發

看實例:

<p draggable="true"><img src="/static/imghwm/default1.png"  data-src="images/225.jpg"  class="lazy"   alt=""   style="max-width:90%" ></p>
   <script>
       var  box = document.querySelector("p");
       box.ondragstart = function(){
           console.log("我被拖拽了!");
       }
       box.ondrag = function(){
           console.log("我在被拖拽的过程中");
       }
       box.ondragend = function(){
           console.log("拖拽结束了!");
       }
   </script>

H5中畫布、拖放事件、音視頻的程式碼實例

1.2.2 目標元素事件(俗解:意思是拖曳的元素放在哪裡)

  • ondragenter   進入目標元素觸發,相當於mouserover

  • #ondragover  進入目標,離開目標之間,連續觸發

  • #ondragleave 離開目標元素觸發,相當於mouseout

  • ondrop  在目標元素上釋放滑鼠觸發(要想觸發drop事件,就必須在ondragover的時間中阻止預設事件)

1.2.3 even下的dataTransfer 物件

  • #setData() : 設定資料key 和value (必須是字串)

  • #getData() : 取得數據,根據key 值,取得對應的value

  • effectAllowed :  拖曳到對應區域時顯示的遊標樣式(none、copy 、copyLink、copyMove、link、linkMove、move、all、和uninitialized)

  • setDragImage()  (當這個傳遞的節點隱藏的時候只支援Firefox)

他是拖曳時顯示的圖形和樣式 , 有三個參數:指定的元素(指點的陰影樣式),座標X  座標Y(x、y是拖曳時滑鼠的位置)

小案例:

     #box{margin-left:150px;}
    #box1 img{display: block;width:100px;height:100px;float:left;margin-left:20px;}
      <p><img  src="/static/imghwm/default1.png" data-src="images/回收站.png" class="lazy" alt="H5中畫布、拖放事件、音視頻的程式碼實例" ></p>
    <p>
    <img  src="/static/imghwm/default1.png" data-src="images/唯美1.jpg" class="lazy" alt="H5中畫布、拖放事件、音視頻的程式碼實例" >
    <img  src="/static/imghwm/default1.png" data-src="images/唯美2.jpg" class="lazy" alt="H5中畫布、拖放事件、音視頻的程式碼實例" >
    <img  src="/static/imghwm/default1.png" data-src="images/唯美3.jpg" class="lazy" alt="H5中畫布、拖放事件、音視頻的程式碼實例" >
    <img  src="/static/imghwm/default1.png" data-src="images/唯美4.jpg" class="lazy" alt="H5中畫布、拖放事件、音視頻的程式碼實例" >
    </p>
<script>
    //获取 垃圾箱对象
    var box = document.querySelector("#box");
    //获取图片列表对象
    var imgList = document.querySelectorAll("img");
    //获取图片列表的父元素
    var box1 = document.querySelector("#box1");
    //遍历图片,并且增加拖拽开始事件
    imgList.forEach(function(item,index){
        item.ondragstart = function(event){
            event.dataTransfer.setData("name",index);
        }
    });
    //阻止冒泡
    box.ondragover = function(event){
        event.preventDefault();
    };
    box.ondrop = function(event){
        // 获取拖拽元素的编号
        var index = event.dataTransfer.getData("name");
        box1.removeChild(imgList[index]);
    };
</script>

實例效果圖:

H5中畫布、拖放事件、音視頻的程式碼實例

#1.3 外部拖曳檔案

#files  (取得外部拖曳的文件,回傳一個filesList清單)

  • #length (event.dataTransfer.files.length)

  • #Type(event.dataTransfer.files[0].type) 例如:圖片的是(image/jpeg)

  • FileReader 物件(讀取檔案資訊)

方法一:readAsDataURL():參數為要讀取的檔案對象,將檔案讀取為DataUrl
方法二:Onload()事件函數:當函數檔案讀取成功完成的時候觸發此事件。 (this.result用來取得讀取的檔案數據,如果是圖片,將回傳base64格式的圖片數據)

小案例:拖曳檔案上傳:

    #box{width:200px;height:200px;line-height:200px;text-align:center;border:5px dashed #eeee;background:pink;}
     <p>请将图片拖到此区域</p>
    <p></p>
    <script>
       var box = document.querySelector("#box");
       var imgList = document.querySelector("#imgs");
       box.ondragover = function(event){
            event.preventDefault();
       };
       box.ondrop = function(event){
            event.preventDefault();
            // 获取外部拖拽的文件
            var fileList = event.dataTransfer.files;
           for( var i = 0;i < fileList.length; i++){
                if(fileList[i].type.indexOf("image")>-1){
                    var fd = new  FileReader();
                    //读取文件对象
                    fd.readAsDataURL(fileList[i]);
                    fd.onload = function(){
                        //创建一个图片节点
                        var img = document.createElement("img");
                        img.src = this.result;
                        img.width = "200";
                        img.height = "200";
                        imgs.appendChild(img);
                    }
                }
           }
       };
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

#二、canvas(畫布)

#2.1 什麼是canvas?

  • canvas是HTML5提供的新標籤

  • canvas是一個矩形區域的畫布,可以用JavaScript在上面繪畫

  • canvas 標籤使用JavaScript 在網頁上繪製圖像,本身不具備繪圖功能

  • canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增圖像的方法

  • HTML5之前的web頁面只能用一些固定樣式的標籤:例如p、p、h1等,但有了canvas Web頁面可以豐富多彩

2.2 canvas 的應用領域

  • 遊戲。 canvas在基於Web的圖像顯示方面比Flash更加立體、更加精巧,canvas遊戲在流暢度和跨平台方面更牛

  • 可視化數據.數據圖表,例如:百度的echart

  • banner廣告:Flash曾經輝煌的時代,智慧型手機還未曾出現。現在以及未來的智慧型手機時代,HTML5技術能夠在banner廣告上發揮巨大作用,用Canvas實現動態的廣告效果再合適不過

2.3 canvas 繪圖基礎

2.3.1 canvas 標籤的屬性和語法

  • 標籤名稱canvas,需要閉合。就是一普通的html標籤

  • 可以設定width和height屬性,但是屬性值單位必須是px,否則忽略

  • ##width和hegiht :預設300*150像素

  • 注意:1.不要用CSS控制它的寬和高,會走出圖片拉伸

                  2.重新设置canvas标签的宽高属性会让画布擦除所有的内容

                  3.可以给canvas画布设置背景色

2.4 canvas绘图上下文 (context)

  • 上下文:上知天文,下知地理。是所有的绘制操作api的入口或者集合。

  • Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的

  • Context对象就是JavaScript操作Canvas的接口

  • 使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文

    <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var ctx = cas.getContext("2d");
    </script>

2.5 基本的绘制路径

2.5.1 canvas 坐标系

canvas 的坐标系从最左上角开始(0,0) .X 向右增大,Y向下增大

H5中畫布、拖放事件、音視頻的程式碼實例

2.5.2 设置绘制起点(moveTo)

  • 语法:ctx.moveTo(x,y)

  • 解释:设置上下文绘制路径的起点。相当于移动画笔到某个位置

  • 参数:x,y都是相对于canvas盒子的最左上角

  • 注意:1. 绘制线段钱必须先设置起点,不然绘制无效

                   2.如果不设置起点,就会使用lineTo 的坐标当做moveTo

2.5.3 绘制直线(lineTo)

  • 语法:ctx.lineTo(x,y)

  • 解释:从x,y的位置绘制一条直线到起点或者上一个线头点

  • x,y 线头点坐标

绘制第一条直线:

        <canvas></canvas>
    <script>
        //获取canvas 节点
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        // 获取canvas 的上下文信息,首先获取一个对象,然后在这个对象里面画画
        var  cts = cas.getContext("2d");
        //起点位置
        cts.moveTo(50, 50);
        // 终点位置
        cts.lineTo(100,100);
        // 开始描边
        cts.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.5.4 路径的开始与闭合

  • 开始路径:ctx.beginPath();

  • 闭合路径:ctx.closePath();

  • 解释:如果复杂路径绘制,必须使用路径开始和结束,闭合路径会自动把最后的线头和开始的线头连在一起

  • beginPath: 核心的作用是将不同绘制的形状进行隔离,每次执行此方法,表示重新绘制一个路径,跟之前绘制的墨迹可以进行分开样式设置和管理

画一个三角形:

       <canvas></canvas>
    <script>
        //获取canvas 节点
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        // 获取canvas 的上下文信息,首先获取一个对象,然后在这个对象里面画画
        var  cts = cas.getContext("2d");
        cts.beginPath();
        //起点位置
        cts.moveTo(50, 50);
        // 终点位置
        cts.lineTo(100,100);
        cts.lineTo(200,100);
        cts.lineTo(50,50);
        // 开始描边
        cts.stroke();
        cts.closePath();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.5.5  描边(stroke)

    • 语法:ctx.stroke();

    • 解释:根据路径绘制线。路径只是草稿,真正绘制线必须执行stroke

    • canvas 绘制的基本步骤

  1. 获得上下文  →canvasElem.getContext('2d');

  2. 开始路径规划  →ctx.beginPath()

  3. 移动起始点 → ctx.moveTo(x, y)

  4. 绘制线(矩形、圆形、图片...)  → ctx.lineTo(x, y)

  5. 闭合路径  → ctx.closePath();

  6. 绘制描边 → ctx.stroke();

2.5.6 绘制表格

    <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        // 获取上下文信息
        var ctx = cas.getContext("2d");
        var rectH = 10;
        var rectW = 10;
        ctx.lineWidth = 0.3;
        // 绘制水平线
        for(var i= 0;i < cas.height/rectH; i++){
            ctx.moveTo(0,i*rectH);
            ctx.lineTo(cas.width, i*rectH);
        }
        // 绘制垂直线
        for(var i = 0; i < cas.width/rectW; i++){
            ctx.moveTo(i*rectH,0);
            ctx.lineTo(i*rectH,cas.width);
        }
        ctx.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.5.7 填充(fill)

  • 语法:ctx.fill();

  • 解释:填充是将闭合路径的内容填充具体的颜色。默认黑色

eg:

    <canvas></canvas>
    <script>
    // 获取节点对象
        var cas = document.querySelector("canvas");
    // 获取上下文
        var cat = cas.getContext("2d");
    // 填充颜色为红色
        cat.fillStyle = "red";
    // 开始 绘制
        cat.beginPath();
    // 绘制描边的颜色为蓝色
        cat.strokeStyle = "blue";
    // 设置起点的位置
        cat.moveTo(50,50);
    // 设置第二个点的位置
        cat.lineTo(200,200);
    // 设置第三个点的位置
        cat.lineTo(50,200);
    // 定义填充,如果不写,会出错
        cat.fill();
        cat.closePath();
    // 结束绘制
        cat.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.5.8 快速创建矩形(rect() 方法)

  • 语法:ctx.rect(x, y, width, height)

  • 解释:x, y是矩形左上角坐标, width和height都是以像素计

  • rect方法只是规划了矩形的路径,并没有填充和描边

     <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        cat.rect(50, 50, 100,100);
        cat.fillStyle = "pink";
        cat.fill();
        cat.strokeStyle = "yellow";
        cat.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.5.9 快速创建描边矩形和填充矩形

  • 语法: ctx.strokeRect(x, y, width, height)

注意此方法绘制完路径后立即进行stroke绘制

  • 语法2:ctx.fillRect(x, y, width, height)

此方法执行完成后。立即对当前矩形进行fill填充
eg:

     <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        cat.strokeRect(50, 50, 100, 100);
        cat.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

eg:

      <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        cat.fillRect(50, 50, 100, 100);
        cat.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.5.10 清除矩形(clearRect())

  • 语法:ctx.clearRect(x,y,w,h);

  • 解释:清除某个矩形内的绘制的内容,相当于橡皮擦

2.6 绘制圆形

2.6.1 概述:arc() 方法创建弧/曲线(用于创建圆或部分圆)

  • 语法:ctx.arc(x, y, r, sAngle, eAngle, counterclockwise)

  • 解释:x,y 圆心坐标,r 半径大小,sAngle:绘制开始的角度。圆心到最右边点为0度,顺时针方向弧度增大。eAngle:结束的角度,注意是弧度( π)。counterclockwise:是否是逆时针,true是逆时针,false:顺时针

  • 弧度和角度的转换公式: rad = deg*Math.PI/180

eg:

     <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        var cat = cas.getContext("2d");
        cat.arc(100, 100, 100, 0, 2*Math.PI,false);
        cat.fillStyle = "skyblue";
        cat.fill();
        cat.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

绘制扇形占比

eg:

     <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat =cas.getContext("2d");
        cat.beginPath();
        cat.fillStyle = "pink";
        cat.moveTo(100,100);
        cat.arc(100,100,100,0,70*Math.PI/180,true);
        cat.closePath();
        cat.fill();
        cat.stroke();
        cat.beginPath();
        cat.moveTo(100,100);
        cat.arc(100,100,100,0,200*Math.PI/180,false);
        cat.fillStyle = "red";
        cat.closePath();
        cat.fill();
        cat.stroke();
        cat.beginPath();
        cat.moveTo(100,100);
        cat.arc(100,100,100,0,90*Math.PI/180,false);
        cat.fillStyle = "blue";
        cat.closePath();
        cat.fill();
        cat.stroke();
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.7 绘制图片

2.7.1 用JS创建 img 对象

  1. var img = document.getElementById("imgId")

  2. var img = new Image();//这个就是 img标签的dom对象

img.src = "imgs/arc.gif";

img.alt = "文本信息";
img.onload = function() {
    //图片加载完成后,执行此方法

2.7.2 基本绘制图片的方式

  • 语法:context.drawImage(img,x,y);

  • 解释:x,y绘制的是图片左上角的坐标,img 是绘制图片的 dom 对象

eg:

    <canvas></canvas>
    <script>
    // 创建对象
        var cas = document.querySelector("canvas");
      // 创建上下文
        var cat = cas.getContext("2d");
      // 创建图片对象
        var img = new Image();
        img.src = "images/唯美1.jpg";
        img.onload = function(){
            cat.drawImage(img, 50,50);
        }
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.7.3 在画布上绘制图像,并规定图像的宽度和高度

  • 语法:context.drawImage(img,x,y,width,height)

  • 解释:width绘制图片的宽度,height 绘制图片的高度

  • 注意:如果指定宽高,最好成比例,不然图片会被拉伸

  • 等比公式:设置高 = 原高度 * 设置宽/ 原宽度

eg:

    <canvas></canvas>
   <script>
       var cas = document.querySelector("canvas");
       var cat = cas.getContext("2d");
       var img = new Image();
       img.src = "images/唯美1.jpg";
       img.onload = function(){
           // 图片的原始的宽高为 500 * 313
           cat.drawImage(img, 0,0,400,313*400/500);
       }
   </script>

H5中畫布、拖放事件、音視頻的程式碼實例

2.7.4 图片裁剪,并在画布上定位被裁剪的部分

  • 语法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

  • 参数说明:sx,sy裁剪的左上角坐标,swidth:裁剪图片的宽度,sheight:裁剪的高度。

eg:

     <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        var img = new Image();
        img.src = "images/唯美1.jpg";
        img.onload = function(){
            cat.drawImage(img, 20,20,200,200,0,0,100,100);
        }
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

三、音视频

3.1 使用标签

  • audio

音频标签 , 使用 controls = "" 将控件展示出来

  • video

视频标签,使用 controls = "" 将控件展示出来

  • source

       <source>
       使用source标签可以设置多个源</source>

3.2 音视频元素( 用来控制音视频 )

3.2.1 标签属性

  • controls:显示或隐藏用户控制界面

  • autoplay:媒体是否自动播放

  • loop:媒体是否循环播放

eg:

    <audio></audio>
 <script>
     var auo = document.querySelector("audio");
     window.onload = function(){
        setInterval(function(){
            auo.play();
        },1000);
     }</script>

H5中畫布、拖放事件、音視頻的程式碼實例
注意:autoplay 属性在谷歌浏览器中不支持,所以小编在这里用了一个setInterval方法,这个属性在火狐浏览器中是可以实现的。

3.2.2 音视频在js中DOM的属性和方法

  • currentTime : 目前播放的时间点

  • duration:媒体总时间(只读)

  • volume:0.0-1.0的音量相对值

  • muted:是否静音

  • paused:媒体是否暂停(只读)

  • ended:媒体是否播放完毕(只读)

  • error:媒体发生错误的时候,返回错误代码(只读)

  • currentSrc:以字符串的形式返回媒体地址(只读)

  • play:媒体播放

  • pause:媒体暂停

  • load:重新加载媒体

eg:

    <video></video>
    <input>
    <input>
    <input>
    <script>
        window.onload = function() {
            var v1 = document.getElementById("v1");

            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");

            btn2.addEventListener(&#39;click&#39;, function() {
                v1.play();
            })

            btn1.onclick = function() {
                v1.pause();
            }

            btn3.onclick = function() {
                v1.src = "res/1.mp4";
                v1.play();
            }

        }
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

3.2.3 事件绑定

  • 补充知识点:addEventListener(type, fn, false)

false,表示不使用捕获(useCapture)

#### 3.2.3.1 DOM事件的三个阶段

  • 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象

  • 目标阶段:到达目标事件位置(事发地),触发事件

  • 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象

  • 注意: 当事件触发在目标阶段时,会根据事件注册的先后顺序执行,在其他两个阶段注册顺序不影响事件执行顺序。也就是说如果该处既注册了冒泡事件,也注册了捕获事件,则按照注册顺序执行。

3.2.4 音视频绑定事件

    <video></video>
    <script>
        window.onload = function() {
            // 获取到相应的DOM节点
            var v1 = document.getElementById("v1");
            // 给dom节点绑定事件
            v1.addEventListener("ended", function() {
                alert("请选择下一个视频");
            })
        }
    </script>

H5中畫布、拖放事件、音視頻的程式碼實例

3.2.5 音视频的事件绑定

loadstart   开始加载
progress  运行的进度
suspend
emptied
stalled
play  播放
pause  暂停
loadedmetadata  
loadeddata
waiting  等待
playing
canplay
canplaythrough
seeking
seeked
timeupdate
ended  结束
ratechange
durationchange
Volumechange

相关推荐:

HTML5 canvas实现画图程序(附代码)

html5实现移动端下拉刷新(原理和代码)

以上是H5中畫布、拖放事件、音視頻的程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具