HTML5（三）canvas（2）

原創 yangwei234 2018-11-20 06:52

（7）變換
     translate：偏移，從起始點爲基準點，移動當前座標位置
     rotate：旋轉（參數爲弧度）
     scale：縮放
例如：

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.fillStyle = 'red';
        oGC.fillRect(0,0,100,100);
};

oGC.translate(100,100);//起始點x,y偏移100
oGC.fillRect(0,0,100,100);
oGC.translate(100,100);
oGC.rotate(45*Math.PI/180);//旋轉45°
oGC.fillRect(0,0,100,100);
oGC.translate(100,100);
oGC.rotate(45*Math.PI/180);
oGC.scale(2,2);//放大兩倍
oGC.fillRect(0,0,100,100);

案例：旋轉的小方塊

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var num = 0;
        var num2 = 0;
        var value = 1;
        setInterval(function(){
                num++;
                oGC.save();
                oGC.clearRect(0,0,oC.width,oC.height);
                oGC.translate(100,100);
                if(num2 == 100){
                        value = -1;
                }else if(num2 == 0){
                        value = 1;
                }
                num2 += value;
                oGC.scale( num2*1/50,num2*1/50 );
                oGC.rotate(num*Math.PI/180);
                oGC.translate(-50,-50);
                oGC.fillRect(0,0,100,100);
                oGC.restore(); 
        },30);
};

（8）插入圖片
      等圖片加載完，再執行canvas操作：圖片預加載，在onload中調用方法
      drawImage(oImg, x, y, w, h)：oImg（當前圖片），x、y座標，w、h寬高

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');

        var yImg = new Image();
        yImg.onload = function(){
                draw(this);
        }
        yImg.src = '2.png';
        function draw(obj){
                oGC.drawImage(obj, 50, 50, 300, 100);
        }
};

微博圖片旋轉效果

<!DOCTYPE html>
<html>
<head>
        <title></title>
</head>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>
window.onload = function(){
        var aInput = document.getElementsByTagName('input');
        var oImg = document.getElementById('img1');
        var yImg = new Image();
        var iNow = 0;
        yImg.onload = function(){
                draw(oImg);
        }
        yImg.src = oImg.src;
        function draw(obj){
                var oC = document.createElement('canvas');
                var oGC = oC.getContext('2d');
                oC.width = obj.width;
                oC.height = obj.height;
                obj.parentNode.replaceChild(oC, obj);
                oGC.drawImage(obj, 0, 0);
                aInput[0].onclick = function(){
                        if(iNow == 0){
                                iNow = 3
                        }else{
                                iNow--;
                        }
                        toChange();
                }
                aInput[1].onclick = function(){
                        if(iNow == 3){
                                iNow = 0
                        }else{
                                iNow++;
                        }
                        toChange();
                }
                function toChange(){
                        switch(iNow){
                                case 1:
                                        oC.width = obj.height;
                                        oC.height = obj.width;
                                        oGC.rotate(90*Math.PI/180);
                                        oGC.drawImage(obj, 0, -obj.height);
                                        break;
                                case 2:
                                        oC.width = obj.width;
                                        oC.height = obj.height;
                                        oGC.rotate(180*Math.PI/180);
                                        oGC.drawImage(obj, -obj.width, -obj.height);
                                        break;
                                case 3:
                                        oC.width = obj.height;
                                        oC.height = obj.width;
                                        oGC.rotate(270*Math.PI/180);
                                        oGC.drawImage(obj, -obj.width, 0);
                                        break;
                                case 0:
                                        oC.width = obj.width;
                                        oC.height = obj.height;
                                        oGC.rotate(0);
                                        oGC.drawImage(obj, 0, 0);
                                        break;
                        }
                }
        }
};
</script>
</head>
<body>
        <input type="button" value="←"/>
        <input type="button" value="→"/>
        <div>
                <img src="2.png" id="img1"/>
        </div>
</body>
</html>

（9）設置背景
    createPattern(oImg, 平鋪方式)——平鋪方式：repeat、repeat-x、repeat-y、no-repeat

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var yImg = new Image();
        yImg.onload = function(){
                draw(this);
        }
        yImg.src = '2.png';

        function draw(obj){
                var bg = oGC.createPattern(obj, 'repeat');
                // oGC.fillStyle = 'red';
                oGC.fillStyle = bg;
                oGC.fillRect(0, 0, 300, 300);
        }
};

（10）漸變
    createLinearGradient(x1, y1, x2, y2)：線性漸變，起始點座標(x1, y1)，結束點座標(x2, y2)；addColorStop(位置, 顏色) 添加漸變點

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var obj = oGC.createLinearGradient(150, 100, 150, 200);
        obj.addColorStop(0, 'red');
        obj.addColorStop(1, 'blue');
        oGC.fillStyle = obj;
        oGC.fillRect(150, 100, 100, 100);
};

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var obj = oGC.createLinearGradient(150, 100, 250, 200);
        obj.addColorStop(0, 'red');
        obj.addColorStop(1, 'blue');
        oGC.fillStyle = obj;
        oGC.fillRect(150, 100, 100, 100);
};

    createRadialGradient(x1, y1, r1, x2, y2, r2)：放射性漸變，第一個圓的座標和半徑(x1, y1, r1)，第二個圓的座標和半徑(x2, y2, r2)

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var obj = oGC.createRadialGradient(200, 150, 100, 200, 150, 150);
        obj.addColorStop(0, 'red');
        obj.addColorStop(0.5, 'yellow');
        obj.addColorStop(1, 'blue');
        oGC.fillStyle = obj;
        oGC.fillRect(0, 0, oC.width, oC.height);
};

（11）文本
      stokeText(文字, x, y)：文字邊框
      fillText(文字, x, y)：文字填充
      font：文字大小
      textAlign：默認是start跟left一樣的效果end、right、center
      textBaseline：文字上下的位置方式，默認alphabetic
      measureText()方法：measureText(str).width——獲取文字的寬度，沒有獲取高度的方法

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.font = '60px impact';//文字大小 樣式
        oGC.textBaseline = 'top';
        var w = oGC.measureText('妙味課堂').width;
        // 文字居中顯示
        oGC.fillText('妙味課堂', (oC.width-w)/2, (oC.height-60)/2);
};

（12）陰影
     shadowOffsetX、shadowOffsetY：x軸偏移、y軸偏移   
     shadowBlur：高斯模糊值
     shadowColor：陰影顏色

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.font = '60px impact';//文字大小 樣式
        oGC.textBaseline = 'top';
        oGC.shadowOffsetX = 10;
        oGC.shadowOffsetY = 10;
        oGC.shadowBlur = 5;
        // alert(oGC.shadowColor)//默認顏色，黑色透明
        oGC.shadowColor = 'yellow';
        var w = oGC.measureText('妙味課堂').width;
        oGC.fillText('妙味課堂', (oC.width-w)/2, (oC.height-60)/2);
};

（13）像素
    getImageData(x, y, w, h)：獲取圖像數據
    putImageData(獲取圖像, x, y)：設置新的圖像數據
    屬性——width（一行的像素個數），height（一列的像素個數），data（一個數組，包含每個像素的rgba四個值，每個值都是在0~255之間的整數）

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');

        oGC.fillRect(0, 0, 100, 100);

        var oImg = oGC.getImageData(0, 0, 100, 100);

        // alert(oImg.width);                //一行的像素個數
        // alert(oImg.height);         //一列的像素個數
        // alert(oImg.data);                //整體像素的數組集合
        // alert(oImg.data.length);

        // alert( oImg.data[0] );  //0 - 255 黑色到白色
        // alert( oImg.data[1] );  //0 - 255 黑色到白色
        // alert( oImg.data[2] );  //0 - 255 黑色到白色
        // alert( oImg.data[3] );  //0 - 255 透明到不透明

        for (var i = 0; i<oImg.width*oImg.height; i++) {
                oImg.data[4*i] = 255;
                oImg.data[4*i+1] = 0;
                oImg.data[4*i+2] = 0;
                oImg.data[4*i+3] = 100;
        }
        oGC.putImageData(oImg, 100, 100);
};

  createImageData(w, h)：生成新的像素矩陣，初始值是全透明的黑色，即(0, 0, 0, 0)
例子：像素現字

<!DOCTYPE html>
<html>
<head>
        <title></title>
</head>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var aLi = document.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++){
                aLi[i].onclick = function(){
                        var str = this.innerHTML;
                        var h = 180;
                        var timer = null;
                        clearInterval(timer);
                        var iNow = 0;
                        oGC.clearRect(0,0,oC.width,oC.height);
                        oGC.font = h + 'px impact';
                        oGC.textBaseline = 'top';
                        oGC.fillStyle = 'red';
                        var w = oGC.measureText(str).width;
                        oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2);
                        var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h);
                        oGC.clearRect(0,0,oC.width,oC.height);
                        var arr = randomArr(w*h,w*h/10);
                        var newImg = oGC.createImageData(w,h);
                        timer = setInterval(function(){
                                for(var i=0;i<arr[iNow].length;i++){
                                        newImg.data[4*arr[iNow][i]] = oImg.data[4*arr[iNow][i]];
                                        newImg.data[4*arr[iNow][i]+1] = oImg.data[4*arr[iNow][i]+1];
                                        newImg.data[4*arr[iNow][i]+2] = oImg.data[4*arr[iNow][i]+2];
                                        newImg.data[4*arr[iNow][i]+3] = oImg.data[4*arr[iNow][i]+3];
                                }
                                oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2);
                                if(iNow == 9){
                                        iNow = 0;
                                        clearInterval(timer);
                                }
                                else{
                                        iNow++;
                                }
                        },200);
                };
        }
        function randomArr(iAll,iNow){
                var arr = [];
                var allArr = [];
                for(var i=0;i<iAll;i++){
                        arr.push(i);
                }
                for(var j=0;j<iAll/iNow;j++){
                        var newArr = [];
                        for(var i=0;i<iNow;i++){
                                newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
                        }
                        allArr.push(newArr);
                }
                return allArr;
        }
};
</script>
</head>
<body>
        <canvas id="c1" width="400" height="400"></canvas>
        <ul style="float:left;">
            <li>妙</li>
            <li>味</li>
            <li>課</li>
            <li>堂</li>
        </ul>
</body>
</html>

  獲取和設置指定座標：封裝：getXY、setXY

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.fillRect(0, 0, 100, 100);
        var oImg = oGC.getImageData(0, 0, 100, 100);
        // alert( getXY(oImg, 3, 5) );
        // setXY(oImg, 3, 5, [255, 0, 0, 255]);
        for(var i=0;i<oImg.width;i++){
                setXY(oImg, i, 5, [255, 0, 0, 255]);//針對一行一列進行操作
        }
        oGC.putImageData(oImg, 100, 100)
        function getXY(obj, x, y){
                var w = obj.width;
                var h = obj.height;
                var d = obj.data;
                var color = [];
                color[0] = d[4*(y*w+x)];
                color[1] = d[4*(y*w+x)+1];
                color[2] = d[4*(y*w+x)+2];
                color[3] = d[4*(y*w+x)+3];
                return color;
        }
        function setXY(obj, x, y, color){
                var w = obj.width;
                var h = obj.height;
                var d = obj.data;
                d[4*(y*w+x)] = color[0];
                d[4*(y*w+x)+1] = color[1];
                d[4*(y*w+x)+2] = color[2];
                d[4*(y*w+x)+3] = color[3];
        }
};

  圖片的像素操作：必須是同源下，例子：反色、倒影、漸變等、馬賽克效果
在chrome會提示：
"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at HTMLImageElement.document.getElementById.onload"的錯誤信息
在IE中會提示：
"security error！"的錯誤信息
原因：圖片存儲在本地時，是默認沒有域名的，用getImageData方法時，瀏覽器會判定爲跨域而報錯
方法：把圖片放置在服務器中，通過服務器返回給客戶端，遵循同源策略

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var yImg = new Image();

        yImg.onload = function(){
                draw(this);
        };
        yImg.src = 'http://localhost:8080/miaowei/2.png';
        function draw(obj){
                oC.width = obj.width;
                oGC.drawImage(obj, 0, 0);
                var oImg = oGC.getImageData(0, 0, obj.width, obj.height);
                var w = oImg.width;
                var h = oImg.height;
                for(var i=0;i<h;i++){
                        for(var j=0;j<w;j++){
                                var result = [];
                                var color = getXY(oImg, j, i);
                                result[0] = 255 - color[0];
                                result[1] = 255 - color[1];
                                result[2] = 255 - color[2];
                                result[3] = 255;
                                setXY(oImg, j, i, result);
                        }
                }
                oGC.putImageData(oImg, 0, obj.height)
        }
        function getXY(obj, x, y){
                var w = obj.width;
                var h = obj.height;
                var d = obj.data;
                var color = [];
                color[0] = d[4*(y*w+x)];
                color[1] = d[4*(y*w+x)+1];
                color[2] = d[4*(y*w+x)+2];
                color[3] = d[4*(y*w+x)+3];
                return color;
        }
        function setXY(obj, x, y, color){
                var w = obj.width;
                var h = obj.height;
                var d = obj.data;
                d[4*(y*w+x)] = color[0];
                d[4*(y*w+x)+1] = color[1];
                d[4*(y*w+x)+2] = color[2];
                d[4*(y*w+x)+3] = color[3];
        }
};

function draw(obj){
                oC.width = obj.width;
                oGC.drawImage(obj, 0, 0);
                var oImg = oGC.getImageData(0, 0, obj.width, obj.height);
                var w = oImg.width;
                var h = oImg.height;
                var newImg = oGC.createImageData(obj.width, obj.height)
                for(var i=0;i<h;i++){
                        for(var j=0;j<w;j++){
                                var result = [];
                                var color = getXY(oImg, j, i);
                                result[0] = 255 - color[0];
                                result[1] = 255 - color[1];
                                result[2] = 255 - color[2];
                                result[3] = 255;
                                setXY(newImg, j, h-i, result);
                        }
                }
                oGC.putImageData(newImg, 0, obj.height)
        }

function draw(obj){
                oC.width = obj.width;
                oGC.drawImage(obj, 0, 0);
                var oImg = oGC.getImageData(0, 0, obj.width, obj.height);
                var w = oImg.width;
                var h = oImg.height;
                var newImg = oGC.createImageData(obj.width, obj.height)
                for(var i=0;i<h;i++){
                        for(var j=0;j<w;j++){
                                var result = [];
                                var color = getXY(oImg, j, i);
                                result[0] = 255 - color[0];
                                result[1] = 255 - color[1];
                                result[2] = 255 - color[2];
                                result[3] = 255*i/h;
                                setXY(newImg, j, h-i, result);
                        }
                }
                oGC.putImageData(newImg, 0, obj.height)
        }

function draw(obj){
                oC.width = obj.width;
                oC.height = obj.height*2;
                oGC.drawImage(obj, 0, 0);
                var oImg = oGC.getImageData(0, 0, obj.width, obj.height);
                var w = oImg.width;
                var h = oImg.height;
                var newImg = oGC.createImageData(obj.width, obj.height)
                var stepW = w/10;
                var stepH = h/10;
                for(var i=0;i<stepH;i++){
                        for(var j=0;j<stepW;j++){
                                var color = getXY(oImg, j*10+Math.floor(Math.random()*10), i*10+Math.floor(Math.random()*10));
                                for(var k=0;k<10;k++){
                                        for(var l=0;l<10;l++){
                                                setXY(newImg, j*10+l, i*10+k, color);
                                        }
                                }
                        }
                }
                oGC.putImageData(newImg, 0, obj.height)
        }

（14）合成
    全局阿爾法值：globalAlpha

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.fillRect(0, 0, 100, 100);
        oGC.fillStyle = 'red';
        oGC.globalAlpha = '0.5';
        oGC.fillRect(50, 50, 100, 100);
};

    覆蓋合成——源：新的圖形；目標：已經繪製過的圖形
  globalCompositeOperation屬性（source-over、destination-over、source-atop、destination-atop、source-in、destination-in、source-out、destination-out、lighter、copy、xor）

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.fillRect(0, 0, 100, 100);
        oGC.fillStyle = 'red';
        // oGC.globalCompositeOperation = 'source-over'
        // oGC.globalCompositeOperation = 'destination-over'
        oGC.fillRect(50, 50, 100, 100);
};
source-over   destination-over  
source-atop   destination-atop  
 source-in   destination-in  
source-out   destination-out  
lighter   xor  
copy      

（15）將畫布導出爲圖像：toDataURL（火狐右鍵可以直接導出成圖片）
      oC.toDataURL()——base64圖片
（16）事件操作：isPointInPath（是否在點擊範圍內）——jCanvasScript（canvas中的jquery）:http://jcscript.com

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.beginPath();
        oGC.arc(100, 100, 50, 0, 360*Math.PI/180, false)
        oGC.closePath();
        oGC.fill();
        oC.onmousedown = function(ev){
                var ev = ev || window.event;
                var x = ev.clientX - oC.offsetLeft;
                var y = ev.clientY - oC.offsetTop;
                if(oGC.isPointInPath(x, y)){      //只針對最後畫出來的圖形有效
                        alert(123)
                }
        }
}
window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');

        var c1 = new Shape(100, 100, 50);
        var c2 = new Shape(200, 200, 50);
        oC.onmousedown = function(ev){
                var ev = ev || window.event;
                var point = {
                        x: ev.clientX - oC.offsetLeft,
                        y: ev.clientY - oC.offsetTop
                }
                c1.reDraw(point);
                c2.reDraw(point);
        }
        c1.click = function(){
                alert(123)
        }
        c2.click = function(){
                alert(456)
        }

        function Shape(x, y, r){
                this.x = x;
                this.y = y;
                this.r = r;

                oGC.beginPath();
                oGC.arc(this.x, this.y, this.r, 0, 360*Math.PI/180, false);
                oGC.closePath();
                oGC.fill();
        }
        Shape.prototype.reDraw = function(point){
                oGC.beginPath();
                oGC.arc(this.x, this.y, this.r, 0, 360*Math.PI/180, false);
                oGC.closePath();
                oGC.fill();
                if(oGC.isPointInPath(point.x, point.y)){
                        this.click();
                }
        }
}

演示jCanvasScript

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        jc.start('c1',true);  //第二個參數：代表重繪的意思
        //jc.rect(100,100,50,50,'#ff0000',1);
        // jc.circle(100,100,50,'#ff0000',1).click(function(){
        //         alert(123);
        // });
        // 拖拽
        // jc.circle(100,100,50,'#ff0000',1).draggable();
        // 外部點擊修改顏色
        jc.circle(100,100,50,'#ff0000',1).id('c1');
        jc.start('c1');
        var oInput = document.getElementById('input1');
        oInput.onclick = function(){
                jc('#c1').color('#ffff00').animate({x:200,y:200,radius:5},2000);//鏈式操作運動效果
        };
        jc.start('c1');
};
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML5 canvas組件

canvas簡介 canvas標籤是用來繪製圖像的 canvas本身沒有繪畫的能力，僅僅是圖形的容器，相當於一塊畫板 必須要使用腳本完成繪製：JS canvas繪畫 <!DOCTYPE html> <html lang="

OliGit 2020-07-08 12:27:30

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

Javascript基礎知識體系化學習總結（九）存儲

Javascript基礎知識體系化學習總結（九）存儲 一、cookie 1.本身是由於瀏覽器和服務端的通信，被用來做存儲。 2.既然是借用的，那麼會存在一些問題如： 儲存量小僅僅是4K； 必須http請求時需要發送到服務器端，增加

ODST_TheSolverO5 2020-07-08 10:59:37

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

判斷中轉頁面入口window.performance.navigation.type

本文轉載自：https://blog.csdn.net/zhouziyu2011/article/details/70673123   今天遇到一個問題 A---------中轉頁面----------B 中轉頁面如何知道自己是從A跳過來

lijia_1983370657 2020-07-08 10:05:05

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

DiveIntoHTML5翻譯(2)——檢測HTML5特性

此篇爲片段翻譯，爲Dive into HTML5系列文章的第三篇，第二篇A Quite Biased History of HTML5 跳過 DETECTING HTML5 FEATURES DETECTION TECHNIQUE

Reactor1379 2020-07-08 09:05:25

HTML5 03 Canvas介紹

<!doctype html> <html> <head></head> <body> <canvas width="500" height="800" style="background:yellow" id="canvas"

xinyuan_he 2020-07-08 08:58:18

HTML5 05 Canvas實例 鬧鐘

<!doctype html> <html> <head></head> <body> <canvas id="clock" width="500" height="500"> 您的瀏覽器不支持canvas標籤，無法看到時鐘

xinyuan_he 2020-07-08 08:58:18

HTML5 04 表單

<!doctype html> <html> <head></head> <body> <form action="http://localhost/test.php" method="post" id="register"></

xinyuan_he 2020-07-08 08:58:18

HTML5 02 音視頻介紹

<!doctype html> <html> <head></head> <body> <!--<video src="movie.webm" controls="controls"> 您的破瀏覽器都是古董早該換了，不然休想

xinyuan_he 2020-07-08 08:58:06

初始HTML靜態頁面------簡單總結！

一，HTML是什麼 1，什麼是HTML？ 超文本標籤語言 什麼是超文本？ 文字，圖片，視頻，音頻，程序，鏈接… 問：html本身是純文本還是超文本？ 答：本身是純文本 二，HTML的基本語法 1，HTML的基本骨架

心为雅好为平 2020-07-08 08:18:48

HTML5之啓動篇-檢測瀏覽器是否支持HTML5與第一個H5程序

通過編寫javaScript瞭解瀏覽器是否支持HTML5與第一次編寫HTML5 的Hello world程序 //觸發標準模式 <!DOCTYPE html> <html> <head> //charset=gb2312 字符

飘雨树 2020-07-08 07:38:48

Egret圖文混排組件

/** * 圖文混排組件 */ class TextImage extends eui.Group { public templet: egret.TextField c

pilihou 2020-07-08 05:52:56

springboot+idea+bootstrap的前臺顯示圖片

接我原來寫的那個圖片上傳，現在寫一下如何在前臺顯示圖片 1、因爲上面是存儲的絕對路徑如下圖，springboot 顯示圖片的話是需要配置application.properties，下面貼出來 application.prope

你的孤独，虽败犹荣 2020-07-08 05:51:59