久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

【原】Canvas圖形繪制

 流楚丶格念 2022-01-14

文章目錄

Canvas圖形繪制

矩形繪制

  • rect(x,y,w,h) 沒有獨(dú)立路徑
  • strokeRect(x,y,w,h) 有獨(dú)立路徑，不影響別的繪制
  • fillRect(x,y,w,h) 有獨(dú)立路徑，不影響別的繪制
  • clearRect(x,y,w,h) 擦除矩形區(qū)域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*繪制矩形路徑 不是獨(dú)立路徑*/
    ctx.rect(100,100,100,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();

    /*繪制矩形  有自己的獨(dú)立路徑*/
    ctx.fillStyle = 'red';
    ctx.strokeRect(200,200,100,100);
    
    ctx.fillStyle = 'skyblue';
    ctx.fillRect(300,300,100,100);
    /*清除矩形的內(nèi)容*/
    // ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

</script>
</body>
</html>

createLinearGradient()方法

繪制漸變顏色矩形
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
/*        .linearGradient{
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right,pink,blue);
        }*/
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
    /*也可以使用一個(gè)漸變的方案了填充矩形*/
    /*創(chuàng)建一個(gè)漸變的方案*/
    /*漸變是由長度的*/
    /*x0y0 起始點(diǎn) x1y1 結(jié)束點(diǎn)  確定長度和方向*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    //linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

    ctx.fillRect(100,100,400,100);

    /*pink---->blue*/
    /*回想線性漸變---->要素 方向  起始顏色 結(jié)束顏色 */
    /*通過兩個(gè)點(diǎn)的坐標(biāo)可以控制 漸變方向*/
</script>
</body>
</html>

圓弧繪制

弧度概念

這就和數(shù)學(xué)中的概念知識(shí)是一樣的,。

  1. 弧度 ： 是一種長度的描述單位
  2. 一個(gè)弧度怎么去描述 一個(gè)圓有多少個(gè)弧度 2 * π
  3. 一弧度有多長 一個(gè)弧度一個(gè)半徑的長度

名詞：

  • 角度：一個(gè)圓是360度
  • 半徑：已一個(gè)點(diǎn)為中心多長為放射半徑
  • 周長：2 * π * r

最終的結(jié)論：一個(gè)角度等于多少弧度 π/180

用三角函數(shù)體驗(yàn)曲線的繪制

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.體驗(yàn)曲線的繪制*/
    /*2.線是由點(diǎn)構(gòu)成的*/
    /*3.曲線可以由數(shù)學(xué)公式得來*/

    /*公式：y = x/2 */
    /*公式：y = (x + 2) ^2  */
    /*公式：y = sin(x) */

    for(var i = 1 ; i < 600 ; i ++){
        var x = i;
        //var y = x/2;
        //var y = Math.pow(x/10-30,2);
        var y = 50*Math.sin(x/10) + 100;
        ctx.lineTo(x,y);
    }
    ctx.stroke();



</script>
</body>
</html>

arc() 方法畫圓弧

arc(x,y,r,startAngle,endAngle,anticlockwise)

參數(shù)：

  • x 圓心橫坐標(biāo)
  • y 圓心縱坐標(biāo)
  • r 半徑
  • startAngle 開始角度
  • endAngle 結(jié)束角度
  • anticlockwise 是否逆時(shí)針方向繪制（默認(rèn)false表示順時(shí)針；true表示逆時(shí)針）

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*繪制圓弧*/
    /*確定圓心  坐標(biāo) x y*/
    /*確定圓半徑  r */
    /*確定起始繪制的位置和結(jié)束繪制的位置  確定弧的長度和位置  startAngle endAngle   弧度*/
    /*取得繪制的方向 direction 默認(rèn)是順時(shí)針 false 逆時(shí)針 true */

    /*在中心位置畫一個(gè)半徑150px的圓弧左下角*/
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true);
    ctx.stroke();


</script>
</body>
</html>

圓實(shí)例練習(xí)

繪制六種顏色等分的圓

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    /*分成幾等分*/
    var num = 360;
    /*一份多少弧度*/
    var angle = Math.PI * 2 / num;

    /*原點(diǎn)坐標(biāo)*/
    var x0 = w / 2;
    var y0 = h / 2;

    /*獲取隨機(jī)顏色*/
    var getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    /*上一次繪制的結(jié)束弧度等于當(dāng)前次的起始弧度*/
    //var startAngle = 0;
    for (var i = 0; i < num; i++) {
        var startAngle = i * angle;
        var endAngle = (i + 1) * angle;
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.arc(x0, y0, 150, startAngle, endAngle);
        /*隨機(jī)顏色*/
        ctx.fillStyle = getRandomColor();
        ctx.fill();
    }


</script>
</body>
</html>

繪制扇形

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*在中心位置畫一個(gè)半徑150px的圓弧右上角 扇形  邊  填充 */
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    /*把起點(diǎn)放到圓心位置*/
    ctx.moveTo(w/2,h/2);

    ctx.arc(w/2,h/2,150,0,-Math.PI/2,true);

    /*閉合路徑*/
    //ctx.closePath();

    ctx.fill();


</script>
</body>
</html>

繪制數(shù)據(jù)餅圖

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.根據(jù)37期的年齡分布繪制餅圖*/
    /*2.準(zhǔn)備統(tǒng)計(jì)的數(shù)據(jù)*/
    /*15-20歲 6個(gè)*/
    /*20-25歲 30個(gè)*/
    /*25-30歲 10個(gè)*/
    /*30-35歲 8個(gè)*/
    var data = [6, 30, 10, 8];
    /*3.在餅圖表示出來*/
    /*4.需要把數(shù)據(jù)轉(zhuǎn)出弧度*/
    var angleList = [];
    var total = 0;
    data.forEach(function (item, i) {
        total += item;
    });
    console.log(total);
    /*第二是轉(zhuǎn)換成弧度的時(shí)候就可以去繪制扇形 減少一次遍歷*/
    data.forEach(function (item, i) {
        var angle = Math.PI * 2 * (item/total);
        angleList.push(angle);
    });
    console.log(angleList);
    /*5.根據(jù)弧度繪制扇形*/

    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    var x0 = w/2;
    var y0 = h/2;
    /*獲取隨機(jī)顏色*/
    var getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }


    var startAngle = 0;
    angleList.forEach(function (item,i) {
        /*上一次繪制的結(jié)束弧度等于當(dāng)前次的起始弧度*/
        var endAngle = startAngle + item;
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        ctx.arc(x0,y0,150,startAngle,endAngle);
        ctx.fillStyle = getRandomColor();
        ctx.fill();
        /*記錄當(dāng)前的結(jié)束位置作為下一次的起始位置*/
        startAngle = endAngle;
    });

</script>
</body>
</html>

繪制文本

  • ctx.font = '微軟雅黑’ 設(shè)置字體
  • strokeText()
  • fillText(text,x,y,maxWidth)
    • text 要繪制的文本
    • x,y 文本繪制的坐標(biāo)（文本左下角）
    • maxWidth 設(shè)置文本最大寬度，可選參數(shù)
  • ctx.textAlign文本水平對(duì)齊方式，相對(duì)繪制坐標(biāo)來說的
    • left
    • center
    • right
    • start 默認(rèn)
    • end
  • ctx.direction屬性css(rtl ltr) start和end于此相關(guān)
    • 如果是ltr,start和left表現(xiàn)一致
    • 如果是rtl,start和right表現(xiàn)一致
  • ctx.textBaseline 設(shè)置基線（垂直對(duì)齊方式 ）
    • top 文本的基線處于文本的正上方，并且有一段距離
    • middle 文本的基線處于文本的正中間
    • bottom 文本的基線處于文本的證下方，并且有一段距離
    • hanging 文本的基線處于文本的正上方，并且和文本粘合
    • alphabetic 默認(rèn)值，基線處于文本的下方，并且穿過文字
    • ideographic 和bottom相似，但是不一樣
  • measureText() 獲取文本寬度obj.width

案例：畫布中心繪制文字

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.在畫布的中心繪制一段文字*/
    /*2.申明一段文字*/
    var str = '您吃飯中飯了嗎';
    /*3.確定畫布的中心*/
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    /*4.畫一個(gè)十字架在畫布的中心*/
    ctx.beginPath();
    ctx.moveTo(0, h / 2 - 0.5);
    ctx.lineTo(w, h / 2 - 0.5);
    ctx.moveTo(w / 2 - 0.5, 0);
    ctx.lineTo(w / 2 - 0.5, h);
    ctx.strokeStyle = '#eee';
    ctx.stroke();
    /*5.繪制文本*/
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    var x0 = w/2;
    var y0 = h/2;
    /*注意：起點(diǎn)位置在文字的左下角*/
    /*有文本的屬性  尺寸 字體  左右對(duì)齊方式  垂直對(duì)齊的方式*/
    ctx.font = '40px Microsoft YaHei';
    /*左右對(duì)齊方式 (center left right start end) 基準(zhǔn)起始坐標(biāo)*/
    ctx.textAlign = 'center';
    /*垂直對(duì)齊的方式 基線 baseline(top,bottom,middle) 基準(zhǔn)起始坐標(biāo)*/
    ctx.textBaseline = 'middle';
    //ctx.direction = 'rtl';
    //ctx.strokeText(str,x0,y0);
    ctx.fillText(str,x0,y0);
    /*6.畫一個(gè)下劃線和文字一樣長*/
    ctx.beginPath();
    /*獲取文本的寬度*/
    console.log(ctx.measureText(str));
    var width = ctx.measureText(str).width;
    ctx.moveTo(x0-width/2,y0 + 20);
    ctx.lineTo(x0+width/2,y0 + 20);
    ctx.stroke();

</script>
</body>
</html>

圓與文本綜合案例：數(shù)據(jù)餅狀圖

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    /*var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');*/

    /*1.繪制餅狀態(tài)圖*/
    /*1.1 根據(jù)數(shù)據(jù)繪制一個(gè)餅圖*/
    /*1.2 繪制標(biāo)題 從扇形的弧中心伸出一條線在畫一條橫線在橫線的上面寫上文字標(biāo)題*/
    /*1.3 在畫布的左上角 繪制說明 一個(gè)和扇形一樣顏色的矩形 旁邊就是文字說明*/

    var PieChart = function (ctx) {
        /*繪制工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*繪制餅圖的中心*/
        this.w = this.ctx.canvas.width;
        this.h = this.ctx.canvas.height;
        /*圓心*/
        this.x0 = this.w / 2 + 60;
        this.y0 = this.h / 2;
        /*半徑*/
        this.radius = 150;
        /*伸出去的線的長度*/
        this.outLine = 20;
        /*說明的矩形大小*/
        this.rectW = 30;
        this.rectH = 16;
        this.space = 20;
    }
    PieChart.prototype.init = function (data) {
        /*1.準(zhǔn)備數(shù)據(jù)*/
        this.drawPie(data);
    };
    PieChart.prototype.drawPie = function (data) {
        var that = this;
        /*1.轉(zhuǎn)化弧度*/
        var angleList = this.transformAngle(data);
        /*2.繪制餅圖*/
        var startAngle = 0;
        angleList.forEach(function (item, i) {
            /*當(dāng)前的結(jié)束弧度要等于下一次的起始弧度*/
            var endAngle = startAngle + item.angle;
            that.ctx.beginPath();
            that.ctx.moveTo(that.x0, that.y0);
            that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle);
            var color = that.ctx.fillStyle = that.getRandomColor();
            that.ctx.fill();
            /*下一次要使用當(dāng)前的這一次的結(jié)束角度*/
            /*繪制標(biāo)題*/
            that.drawTitle(startAngle, item.angle, color , item.title);
            /*繪制說明*/
            that.drawDesc(i,item.title);
            startAngle = endAngle;
        });
    };
    PieChart.prototype.drawTitle = function (startAngle, angle ,color , title) {
        /*1.確定伸出去的線 通過圓心點(diǎn) 通過伸出去的點(diǎn)  確定這個(gè)線*/
        /*2.確定伸出去的點(diǎn) 需要確定伸出去的線的長度*/
        /*3.固定伸出去的線的長度*/
        /*4.計(jì)算這個(gè)點(diǎn)的坐標(biāo)*/
        /*5.需要根據(jù)角度和斜邊的長度*/
        /*5.1 使用弧度  當(dāng)前扇形的起始弧度 + 對(duì)應(yīng)的弧度的一半 */
        /*5.2 半徑+伸出去的長度 */
        /*5.3 outX = x0 + cos(angle) * ( r + outLine)*/
        /*5.3 outY = y0 + sin(angle) * ( r + outLine)*/
        /*斜邊*/
        var edge = this.radius + this.outLine;
        /*x軸方向的直角邊*/
        var edgeX = Math.cos(startAngle + angle / 2) * edge;
        /*y軸方向的直角邊*/
        var edgeY = Math.sin(startAngle + angle / 2) * edge;
        /*計(jì)算出去的點(diǎn)坐標(biāo)*/
        var outX = this.x0 + edgeX;
        var outY = this.y0 + edgeY;
        this.ctx.beginPath();
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(outX, outY);
        this.ctx.strokeStyle = color;
        /*畫文字和下劃線*/
        /*線的方向怎么判斷 伸出去的點(diǎn)在X0的左邊 線的方向就是左邊*/
        /*線的方向怎么判斷 伸出去的點(diǎn)在X0的右邊 線的方向就是右邊*/
        /*結(jié)束的點(diǎn)坐標(biāo)  和文字大小*/
        this.ctx.font = '14px Microsoft YaHei';
        var textWidth = this.ctx.measureText(title).width ;
        if(outX > this.x0){
            /*右*/
            this.ctx.lineTo(outX + textWidth,outY);
            this.ctx.textAlign = 'left';
        }else{
            /*左*/
            this.ctx.lineTo(outX - textWidth,outY);
            this.ctx.textAlign = 'right';
        }
        this.ctx.stroke();
        this.ctx.textBaseline = 'bottom';
        this.ctx.fillText(title,outX,outY);

    };
    PieChart.prototype.drawDesc = function (index,title) {
        /*繪制說明*/
        /*矩形的大小*/
        /*距離上和左邊的間距*/
        /*矩形之間的間距*/
        this.ctx.fillRect(this.space,this.space + index * (this.rectH + 10),this.rectW,this.rectH);
        /*繪制文字*/
        this.ctx.beginPath();
        this.ctx.textAlign = 'left';
        this.ctx.textBaseline = 'top';
        this.ctx.font = '12px Microsoft YaHei';
        this.ctx.fillText(title,this.space + this.rectW + 10 , this.space + index * (this.rectH + 10));
    };
    PieChart.prototype.transformAngle = function (data) {
        /*返回的數(shù)據(jù)內(nèi)容包含弧度的*/
        var total = 0;
        data.forEach(function (item, i) {
            total += item.num;
        });
        /*計(jì)算弧度 并且追加到當(dāng)前的對(duì)象內(nèi)容*/
        data.forEach(function (item, i) {
            var angle = item.num / total * Math.PI * 2;
            item.angle = angle;
        });
        return data;
    };
    PieChart.prototype.getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    };

    var data = [
        {
            title: '15-20歲',
            num: 6
        },
        {
            title: '20-25歲',
            num: 30
        },
        {
            title: '25-30歲',
            num: 10
        },
        {
            title: '30以上',
            num: 8
        }
    ];

    var pieChart = new PieChart();
    pieChart.init(data);

</script>
</body>
</html>

    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多